For the complete documentation index, see llms.txt. Markdown variants are available for the docs, pricing and about pages: append .md to the URL or send an Accept: text/markdown header (the home page answers the header too). An agent skill is available at /.well-known/agent-skills/site-skill.md.
craftUI
PricingSign in
craftUI

Build apps that look like a design team made them.

The first UI library that ships its full design system with the code. Colors, type, spacing and components come ready for your team and for the AI tools you build with.

Get Started
Browse Components
Templates

Full pages, ready to launch

Complete landing pages, from the first headline to the last call to action, that fit every screen your visitors use.

Get craftUI
Why craftUI

The details your customers notice, built into every component

Most UI kits stop at how a component looks. Every craftUI component also handles access, motion, themes, screen sizes and the small details, so your product looks finished without a designer.

Every control works by keyboard, touch and screen reader, so fewer people get stuck and your accessibility review starts from a solid base.

  • A visible focus ring, and arrow keys and Escape that work as expected
  • Buttons that shrink slightly on press, with padding balanced around icons
  • Small buttons still get a 40px tap target
  • Tab order
    tab
  • Press
    Continuescale 0.96
  • Hit area
    32 → 40 px
  • Optical padding
    1213

Blocks

Start from a finished block

Dashboards, forms, schedules and settings built from the same tokens as the rest of the kit. Drop one in and it matches your product without restyling.

  • Savings over time

    Finance
    • Bar chart
    • Card
    • Button

  • Payment scheduler

    Scheduling
    • Calendar
    • List

  • Traffic by device

    Analytics
    • Bar chart
    • Legend
    • Button

  • Team invites

    Team
    • Input
    • Select
    • Button

  • Account transfer

    Payments
    • Input
    • Select
    • Button

  • Lighting controls

    Smart home
    • Switch
    • Slider
    • Toggle group
Browse Components
Components

The pieces behind every block

Every block is made from these components, and every component reads from the same design tokens.

  • ButtonPrimary and secondary actions
  • InputSingle-line text entry
  • SelectPick one option from a list
  • SwitchTurn a setting on or off
  • SliderSet a value along a range
  • Toggle groupSwitch between related views
  • CheckboxChoose any number of options
  • Radio groupChoose exactly one option
  • ProgressShow how far along a goal is
  • Bar chartCompare values over time
10 components
See All Components

Replace this placeholder with your custom shadcn component

Edit registry/components/your-component.tsx to get started