Getting Started
Introduction
A set of beautifully crafted, accessible components with a calm, tactile design foundation. Open code. Copy it, own it, ship it.
Sabil UI is not a package you install. It is a collection of components you copy into your app and own. It is built on Radix primitives for accessibility and Tailwind CSS for styling, with a design foundation of its own on top.
Principles#
Open code
Every component is a file in your project. Read it, change it, delete what you do not need.
One foundation
Color, radius, depth and motion live in tokens. Components only read tokens, never raw values.
Tactile surfaces
Primary actions use a blue gradient with a 1px inner edge. Secondary actions sit on a raised white surface.
Fast by default
Motion is short and purposeful. Overlays enter with a strong ease-out, buttons answer on press.
How it works#
Each component page shows a live preview, the exact code of that preview, and the full source of the component. Copy the source into components/ui, install the listed dependencies, and import it. Because the code is yours, there is no version to upgrade and nothing to override.