Craft Design System

View Demo Site

Craft is a lightweight, flexible design system for building responsive layouts in React and handling prose. It provides a set of foundational components that make it easy to create consistent, maintainable layouts while leveraging the power of Tailwind CSS.

Quick Start

To quickly get up and building with shadcn and craft use this command:

pnpx shadcn init my-app
cd my-app
pnpx craft-ds inits

To add to an existing project, use:

pnpx craft-ds init

Features

• Modern Styling: Built with Tailwind CSS and compatible with shadcn/ui
• Responsive Design: First-class support for responsive layouts
• Type-Safe: Written in TypeScript with strong type inference
• Performance: Zero runtime overhead, all styles are compiled
• Accessible: Built with WCAG guidelines in mind
• Lightweight: No external dependencies beyond Tailwind CSS
• Inline Styles Support: Easily apply custom styles directly to components

Requirements

• Node.js 18 or higher (recommended 20+)
• Next.js 13 or higher (recommended 15+)
• shadcn/ui (for the color system)
• Tailwind CSS
• TypeScript (recommended)

Quick Start

# Using npm
npx init craft-ds

# Using pnpm (recommended)
pnpx init craft-ds

# Using yarn
yarn create craft-ds

The installer will:

1. Check your environment and dependencies
2. Install and configure required packages
3. Set up the Craft component in your project
4. Optionally install and configure shadcn/ui

Core Components

Layout

The root component that provides base styling and structure for the HTML document.

import { Layout } from "@/components/ds";

export default function RootLayout({ children }) {
  return <Layout>{children}</Layout>;
}

Main

The primary content area of your page.

<Main>
  <h1>Welcome</h1>
  <p>This content will be in the main section.</p>
</Main>

Section

A semantic section container for grouping related content with vertical padding.

<Section>
  <h2>Features</h2>
  {/* Section content */}
</Section>

Container

Centers content with a maximum width and provides consistent padding.

<Container>{/* Centered content with padding */}</Container>

Nav

Creates a navigation container with an inner div for navigation elements.

<Nav>
  <div>Logo</div>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</Nav>

Prose

A powerful component for rich text content with extensive typography styling. Can be rendered as an article element when needed.

// As a div (default)
<Prose>
  <h1>Rich Text Content</h1>
  <p>Content with proper typography styling.</p>
</Prose>

// As an article with spacing
<Prose isArticle={true} isSpaced={true}>
  <h1>Article Title</h1>
  <p>Article content with proper typography and spacing.</p>
</Prose>

Component Props

All components share a common props interface:

type DSProps = {
  className?: string;
  children?: React.ReactNode;
  id?: string;
  style?: React.CSSProperties;
  dangerouslySetInnerHTML?: { __html: string };
  containerClassName?: string; // Used in Nav component
  isArticle?: boolean; // Used in Prose component
  isSpaced?: boolean; // Used in Prose component
};

Typography System

The Prose component provides a comprehensive typography system that handles:

• Headings (h1-h6): Responsive sizing, proper tracking, and text balance
• Paragraphs: Text prettifying and proper base sizing
• Inline Text: Styling for strong, em, del, small, sub, and sup elements
• Links: Special styling with hover and focus states
• Lists: Styled ordered, unordered, and nested lists
• Definition Lists: Styled dt and dd elements
• Code Blocks: Different styling for inline code vs. code blocks
• Tables: Fully styled tables with alternating row colors
• Media: Styling for images, videos, figures, and captions
• Block Elements: Styling for blockquotes, horizontal rules, and details/summary
• Interactive Elements: Styling for keyboard shortcuts and abbreviations

Typography Example

<Prose isSpaced={true}>
  <h1>Main Heading</h1>
  <p>Introduction paragraph with <a href="#">links</a> and <code>inline code</code>.</p>

  <h2>Section Heading</h2>
  <p>More content with <strong>strong text</strong> and <em>emphasis</em>.</p>

  <ul>
    <li>List item one</li>
    <li>List item two
      <ul>
        <li>Nested list item</li>

      </ul>
    </li>
  </ul>

  <blockquote>
    <p>This is a blockquote with styled borders and background.</p>
  </blockquote>

  <pre><code>// This is a code block
function example() {
  return true;
}</code></pre>
</Prose>

Customization

Tailwind Configuration

Craft works seamlessly with your Tailwind configuration. You can customize:

• Colors through your color palette
• Spacing through your spacing scale
• Typography through your font settings
• Breakpoints through your screen configurations

Component Styling

All components accept a className prop for custom styling:

<Container className="bg-gray-100 dark:bg-gray-900">
  <Section className="py-12">
    <h1>Custom Styled Section</h1>
  </Section>
</Container>

Best Practices

Layout Structure

<Layout>
  <Nav>{/* Navigation content */}</Nav>
  <Main>
    <Section>
      <Container>
        <h1>Page Title</h1>
        {/* Content */}
      </Container>
    </Section>
  </Main>
</Layout>

Content Structure

<Prose isArticle={true} isSpaced={true}>
  <h1>Article Title</h1>
  <p>Introduction paragraph...</p>

  <h2>Section Title</h2>
  <p>Section content...</p>

  {/* Rich content with full typography styling */}
</Prose>

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT Bridger Tower 2025