This is a Technology Sample you can rely on to build your own Design System, based on React and Tailwind CSS.
Disclaimer: Technology Samples aren't comprehensive Design Systems but showcases a given technology so you free to build you own solution upon it.
This tech sample declares its Design Tokens using the Tailwind CSS Theme Config syntax. Each component in your Design System can exploit those theme specific tokens using the atomic classes exposed by Tailwind CSS.
To build its components, this tech sample uses Headless UI and React/JSX with TypeScript. Components are then styled using Tailwind CSS atomic classes, according to Headless UI examples.
Note: The use of Headless UI is not mandatory and you can use any kind of framework allowing you to customize the rendering process with CSS classes. Headless UI is built by Tailwind Labs whom also provide Tailwind CSS.
The Tokens are split in different components:
typography: fonts familiescolors: colors, variants, and helpersborders: borders and radiusopacity: transparency valuesshadows: shadows effectsspacing: relative and absolute spacesz-index: z-axe indexes
All tokens are declared in the Tailwind CSS Theme Config syntax by exporting them in dedicated objects, e.g.:
export const typography = {
fontFamily: {
code: ['Consolas', 'SFMono-Regular', 'Monaco', 'monospace'],
},
fontWeight: {
custom: '600',
},
};Then all tokens definitions are merged in the ~/theme/ component to build the global Tailwind CSS theme definition. This theme.extend is used in the tailwind.config.js file directly to setup all the classes and variants.
Components can exploit the Tailwind CSS atomic classes directly:
<button
className={`
${active ? 'bg-purple-500 text-white' : 'text-grey-900'}
flex items-center w-full px-2 py-2
group rounded-md
text-sm
`}
>
Click Me!
</button>
}Stories are written in Storybook's Component Story Format. Components' stories are located in their stories/ folder.
Documentation pages are decorated by a React layout using the @divriots/dockit-react helpers. See the mdx-layout component.
Each component embed its own documentation in its doc/ folder. You can use any web format for your documentation but we recommend you to write it with the mdx format, allowing you to embed your components live in the documentation.