Craft Design System

A lightweight, customizable design system for React and Next.js, optimized for speed and flexibility.

GitHub

npm

Quick Start

Install Craft in your Next.js project:

npx craft-ds@latest init

Key Features

  • Single File Components: All components in one file for easy management
  • Next.js Optimized: Seamless integration with Next.js
  • Tailwind Integration: Leverages Tailwind CSS for styling
  • shadcn/ui Compatible: Works well with shadcn/ui components
  • TypeScript Support: Fully typed for better development experience

Components

Craft includes six main components:

Example Usage

import { Main, Section, Container, Box } from "craft-ds";

export default function Page() {
  return (
    <Main>
      <Section>
        <Container>
          <h1>Welcome to Craft</h1>
          <p>Build responsive layouts with ease.</p>
          <Box cols={{ sm: 1, md: 2 }} gap={4}>
            <div>Feature 1</div>
            <div>Feature 2</div>
          </Box>
        </Container>
      </Section>
    </Main>
  );
}

Responsive Layouts

Craft makes it easy to create responsive layouts:

Box Flex Item 1
Box Flex Item 2
Box Flex Item 3
Box Grid Item 1
Box Grid Item 2
Box Grid Item 3

Get Started

  1. Install the package: npm install craft-ds
  2. Import the components you need
  3. Use the components to build your layout
  4. Customize using className prop and Tailwind CSS

For more detailed instructions and API documentation, visit our GitHub repository.

Why Craft?

  • Simplicity: One file, six components, endless possibilities
  • Performance: Optimized for Next.js and modern web standards
  • Flexibility: Easy to customize and extend
  • Developer Experience: Intuitive API and excellent TypeScript support

Start building beautiful, responsive layouts with Craft today!