✴︎

Craft Design System

Craft is a lightweight, flexible design system for building responsive layouts in React and handling prose.

+ Get Started with Craft+ View Source Code+ View `craft-ds` on `npm`+ View an Article Example
Craft is a minimalist Design System that combines a single component file and a single CSS file with Next.js best practices for building websites quickly. It leverages Next.js, Tailwind, shadcn/ui, and TypeScript to provide a streamlined development experience while maintaining a clean, modern aesthetic.

Headings

HTML Attribute

h1

Heading 1

HTML Attribute

h2

Heading 2

HTML Attribute

h3

Heading 3

HTML Attribute

h4

Heading 4

HTML Attribute

h5

Heading 5

HTML Attribute

h6

Heading 6

Text Styles

HTML Attribute

p

Regular paragraph text.

HTML Attribute

lead

Lead paragraph text that stands out from regular text.

HTML Attribute

large

Large text that's bigger than regular text.

HTML Attribute

small

Small text that's smaller than regular text.

HTML Attribute

muted

Muted text with reduced emphasis.

Lists

HTML Attribute

ul

This is an example of an unordered list

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3

HTML Attribute

ol

This is an example of an ordered list

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

HTML Attribute

dl

Definition Term
Definition description explaining the term above.
Another Term
Another description for the term above.

Block Elements

HTML Attribute

blockquote

A well-known quote, contained in a blockquote element.- Source Attribution

HTML Attribute

pre

function example() {
  console.log("Hello World");
}

HTML Attribute

details

Click to expand

Hidden content that appears when expanded.

HTML Attribute

figure

Example
A sample image with a caption

Inline Elements

HTML Attribute

a

Sample link with hover state

HTML Attribute

strong

Strong text for emphasis

HTML Attribute

code

Inline code element

HTML Attribute

kbd

Ctrl + C

HTML Attribute

mark

Highlighted text

HTML Attribute

abbr

HTML

HTML Attribute

sub,sup

Text with subscript and superscript

Tables

HTML Attribute

table

Header 1Header 2Header 3
Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

Form Elements

HTML Attribute

input

HTML Attribute

textarea

HTML Attribute

select

HTML Attribute

checkbox

HTML Attribute

radio

Additional Elements

HTML Attribute

hr

Text before horizontal rule

Text after horizontal rule

HTML Attribute

small

Small text element

HTML Attribute

video

HTML Attribute

nested-lists

  • Parent item 1
  • Parent item 2
    • Child item 1
    • Child item 2
  • Parent item 3

HTML Attribute

task-list

  • Completed task
  • Pending task

HTML Attribute

table-of-contents

HTML Attribute

footnotes

  1. First footnote reference
  2. Second footnote reference

Follow on x.com for updates.

© 2025 brijr