Our components are easy to use, and easy to customize. They are built with simple React and Tailwind CSS. No need to learn new abstractions or syntax. Animations and dark mode are built in.
You read all your 14000 emails.
Things are getting toasty!
Use the AI chat to help you customize your components before you copy them. Ask to change appearance, styling, functionality and more. It even provides you with a preview.
Make the avatar square
We use Tailwind @apply to generate CSS styles, blending the best of Tailwind and Traditional CSS together. Implementing inheritance, overrides, variants and states are hassle free and familiar.
<button className="btn">
DotStyle
</button>
<button className="btnPrimary">
DotStyle
</button>
<button className="btnSecondary">
DotStyle
</button>
<button className="btnOutline">
DotStyle
</button>
<button className="btn rounded-full bg-emerald-400 hover:bg-emerald-300 text-black font-semibold text-sm">
DotStyle
</button>
<button className="btnPrimary w-fit !rounded-full !bg-emerald-400 hover:!bg-emerald-300 !font-semibold">
Override
</button>
.card { @apply bg-white dark:bg-zinc-900 border }.cardDefault { @apply card border-zinc-300 dark:border-zinc-600 rounded shadow-md hover:shadow-lg p-4 transition-all duration-200 ease-in-out
Create your own design systems to help create beautiful, consistent UIs. See your changes instantly in the live editor. Write Tailwind code, or use our selectors to help you.
Body
Label
Body
Label
Body
Label
Body
Label
Body
Label
The builder allows you to create components with your own design system or pure Tailwind. See your changes instantly. Use our AI to help you create and modify components, or upload an image of a component to create it.
Test mobile responsiveness, dark mode, use our premade blocks, and more.
Make a subscription modal
Every component has dark mode built in. Use our dark mode toggle to see your components in dark mode instantly. Use it while creating design systems and using the component builder as well.