# ssntl/ui

> Production-ready React components on the Essential Design system, installed with the shadcn CLI. Every component ships with a rules file: read it before using, changing or reviewing the component.

- [Rulebook](https://ui.ssntl.app/rules/ssntl-ui.md): every rule the library follows

## Review every interface with these skills

- better-interface (Jakub Krehel): `npx skills@latest add https://github.com/jakubkrehel/skills --skill better-interface`
- make-interfaces-feel-better (Jakub Krehel): `npx skills@latest add jakubkrehel/make-interfaces-feel-better`
- emilkowalski/skills (Emil Kowalski): `npx skills@latest add emilkowalski/skills`

## Components

- [Button](https://ui.ssntl.app/rules/button.md): A pill-shaped action in five tones: primary, secondary, accent, ghost and destructive.
- [Skeleton](https://ui.ssntl.app/rules/skeleton.md): A placeholder that shimmers while content loads, with the system's shimmer.
- [Input](https://ui.ssntl.app/rules/input.md): A 48px text field with a 3:1 border, a visible focus ring and a width that hints at the answer.
- [Field](https://ui.ssntl.app/rules/field.md): A visible, clickable label above the control and a hint below that names the fix when there is an error.
- [Input group](https://ui.ssntl.app/rules/input-group.md): A single-field form with the submit button inset, its corners concentric with the field.
- [Table](https://ui.ssntl.app/rules/table.md): A table for exact lookup: numbers right-aligned with tabular figures, a caption with period and source.
- [List](https://ui.ssntl.app/rules/list.md): Rows split by hairlines inset to the text, with a tabular trailing value.
- [Stat](https://ui.ssntl.app/rules/stat.md): A big number with a short label and a signed change, where importance shows in size, weight and color.
- [Avatar](https://ui.ssntl.app/rules/avatar.md): A circle for people, a smaller square for workspaces, with initials centered by cap height.
- [Blockquote](https://ui.ssntl.app/rules/blockquote.md): A pull quote that adds its own curly quotes and hangs the opening one outside the text.
- [Metric card](https://ui.ssntl.app/rules/metric-card.md): One metric in an 8px frame with concentric corners, then its title and one sentence.
- [Side nav](https://ui.ssntl.app/rules/side-nav.md): Section navigation as wide as its longest label, with aria-current for the page.
- [Tag](https://ui.ssntl.app/rules/tag.md): A status pill where the state is always a word; the dot only supports it.
- [Card](https://ui.ssntl.app/rules/card.md): A flat tile separated by tone, not borders, with one brand tone for text on color.
- [Empty state](https://ui.ssntl.app/rules/empty-state.md): An empty screen that says what will appear and offers the action that fills it.
- [Typography](https://ui.ssntl.app/rules/typography.md): Heading, Text and Eyebrow on the system's type roles, each with its own line height and tracking.
- [Code](https://ui.ssntl.app/rules/code.md): Inline codes and IDs in the mono face with a slashed zero, so no character can be misread.
- [Toolbar](https://ui.ssntl.app/rules/toolbar.md): A row of 48px actions, 8px apart: icon tools and one text commit action on one baseline, with arrow-key focus.
- [Media card](https://ui.ssntl.app/rules/media-card.md): Text over an image on a dark scrim, so it reads on any picture.
- [Frame](https://ui.ssntl.app/rules/frame.md): A fixed-ratio image frame so every image in a set lines up, cropped or contained.
- [Scroll area](https://ui.ssntl.app/rules/scroll-area.md): A scroll container with the same rounded scrollbar in every browser, Firefox included, and native scrolling.
- [Link](https://ui.ssntl.app/rules/link.md): An inline link that is underlined as well as blue, says where it goes and breaks long URLs.
- [Close button](https://ui.ssntl.app/rules/close-button.md): A 48px close target around a 20px icon, placed 8px from the edge.
- [Checkbox](https://ui.ssntl.app/rules/checkbox.md): A native checkbox whose whole label row is the target and never gets selected.
- [Radio group](https://ui.ssntl.app/rules/radio-group.md): Native radios in one column, and radio cards that show the same facts in the same order.
- [Slider](https://ui.ssntl.app/rules/slider.md): A slider that always shows its value and both ends, with full keyboard support.
- [Combobox](https://ui.ssntl.app/rules/combobox.md): A searchable list for long sets of options: type to filter instead of scrolling.
- [Pagination](https://ui.ssntl.app/rules/pagination.md): Previous, page numbers and Next at one 48px height, with the current page filled and announced.
- [Search field](https://ui.ssntl.app/rules/search-field.md): A 48px search input with an icon and a clear button, the height of the button beside it.
- [Swatch](https://ui.ssntl.app/rules/swatch.md): A variant picker of named radios with 44px targets, placed under the preview it changes.
- [Rail](https://ui.ssntl.app/rules/rail.md): A scrolling row of cards with room to swipe and full-height edge navigation.
- [Notice](https://ui.ssntl.app/rules/notice.md): A dismissible message with a full-size close button and concentric corners.
- [Menu](https://ui.ssntl.app/rules/menu.md): A dropdown menu on elevation 2 whose inset header and items share the panel's curve.
- [Tabs](https://ui.ssntl.app/rules/tabs.md): Pill tabs whose selection nests in the track and slides with ease-in-out.
- [Announcement](https://ui.ssntl.app/rules/announcement.md): A news pill with an inset badge that nests in its curve.
- [Dialog](https://ui.ssntl.app/rules/dialog.md): A modal on the top layer with focus trap, a nested close button and actions at the end.
- [Toast](https://ui.ssntl.app/rules/toast.md): A floating notification you can swipe away: it follows the finger and only leaves on release.
- [Switch](https://ui.ssntl.app/rules/switch.md): An on/off setting with a quick press and a thumb that gives a little while held.
- [Toggle](https://ui.ssntl.app/rules/toggle.md): A two-state button whose icon cross-fades between states, with the standard press.
- [Marquee](https://ui.ssntl.app/rules/marquee.md): A strip that drifts on its own for showcases: pauses on hover, focus, off screen and with a 48px button, and stands still with reduced motion.
- [Carousel](https://ui.ssntl.app/rules/carousel.md): A looping carousel with neighbours peeking in and a progress dot per card: autoplay pauses on interaction and off screen, and waits for Play with reduced motion.
- [Pill accordion](https://ui.ssntl.app/rules/pill-accordion.md): Pills that grow into cards over a product photo, on a CSS-only glass material: one open at a time, stepped with Previous and Next.
- [Accordion](https://ui.ssntl.app/rules/accordion.md): Disclosure sections that open first and let their lines follow through.
- [Flip card](https://ui.ssntl.app/rules/flip-card.md): A true 3D turn with a back face of its own, so what it reveals is never mirrored.
- [Sheet](https://ui.ssntl.app/rules/sheet.md): A bottom sheet you can drag away: it follows you, says when release will close it, and springs back.

## Utilities

- [Smooth shadows](https://ui.ssntl.app/rules/shadow-smooth.md): Five-layer shadows that fall off like real light. Size, intensity, tint and a hairline ring.
- [Concentric radius](https://ui.ssntl.app/rules/radius-concentric.md): Concentric corners: the inner radius is the outer radius minus the gap, always in sync.
- [Loading shimmer](https://ui.ssntl.app/rules/shimmer.md): A slanted beam that crosses a loading placeholder, transform-only and respecting reduced motion.
- [Interface details](https://ui.ssntl.app/rules/details.md): The details that make an interface feel right: shadows instead of borders, image outlines, cross-fading icons and staggered entrances.
- [Optical balance](https://ui.ssntl.app/rules/optical.md): Measured on Mona Sans: center letters by cap height, align big headings to the text edge and hang opening quotes.
- [Elevation](https://ui.ssntl.app/rules/elevation.md): Five levels built from smooth shadows, from the base surface to modals, the pop-in and pop-out motion for floating layers, and a CSS-only glass material.
- [Motion kit](https://ui.ssntl.app/rules/motion-kit.md): Small animations on the motion tokens: an error shake, a collapsible height, children that follow through, and a sheet slide.
- [Backgrounds](https://ui.ssntl.app/rules/backgrounds.md): Dot and line grids in the current text color: texture that never competes with the content.
- [Scrollbar](https://ui.ssntl.app/rules/scrollbar.md): Rounded, concentric scrollbars from the tokens for native scroll containers, plus scrollbar-none.

## Blocks

- [Pricing](https://ui.ssntl.app/rules/pricing.md): A pricing section: plans in concentric frames with the price beside one action, the features below, and a wide row for custom requests.
- [Intro](https://ui.ssntl.app/rules/intro.md): A personal or studio introduction: a portrait with a caption, one sentence that says who and where, two actions and availability in words.