# ChaiUI

> The chaicode.com look as a shadcn registry: near-black and warm, white Manrope headlines, one pale-cream highlight phrase per paragraph, solid white buttons with asymmetric corners, warm hairline cards with no shadow, almost no orange. Components are copied into your app with the shadcn CLI.

Install: add `"registries": { "@chaiui": "https://ui.chaicode.com/r/{name}.json" }` to components.json, then `npx shadcn@latest add @chaiui/chaiui` (the theme) and any item below. Every item page shows it in dark and light with its code.

Agent skills: `npx skills add https://ui.chaicode.com` installs `chaiui` and `chaiui-review` into Claude Code, Cursor, Codex and other agents.

## Docs

- [Getting started](https://ui.chaicode.com/docs): install, theming and the rules
- [All components](https://ui.chaicode.com/docs/components)
- [Registry index](https://ui.chaicode.com/r/registry.json): every item as JSON

## Items

- [Utils](https://ui.chaicode.com/docs/components/utils): cn(), the shadcn class merger every component uses.
- [Backdrop](https://ui.chaicode.com/docs/components/backdrop): The hexagon glow page background, warm in light mode too, with a faded bottom edge.
- [Theme provider](https://ui.chaicode.com/docs/components/theme-provider): Dark by default, a class on <html>, remembered in localStorage, with a no-flash script.
- [Theme switcher](https://ui.chaicode.com/docs/components/theme-switcher): chaicode.com's half-shaded circle, with one label for both themes.
- [Button](https://ui.chaicode.com/docs/components/button): Solid and outline with asymmetric corners, plus soft, muted, ghost and danger.
- [Highlight](https://ui.chaicode.com/docs/components/highlight): The pale-cream Montserrat phrase. One per paragraph.
- [Card](https://ui.chaicode.com/docs/components/card): The warm hairline listing card: faint fill, a little blur, no shadow.
- [Chip](https://ui.chaicode.com/docs/components/chip): An outlined meta chip, with semantic tones as text and stroke only.
- [Badge](https://ui.chaicode.com/docs/components/badge): The small labels that sit on a card image: rating, new, hot, highest rated.
- [Level](https://ui.chaicode.com/docs/components/level): Easy, Medium or Hard as a coloured word with a dot.
- [Live dot](https://ui.chaicode.com/docs/components/live-dot): The pinging dot with a label, for "Live" and "Available on Udemy for Business".
- [Input](https://ui.chaicode.com/docs/components/input): The toolbar text field: h-9, a grey hairline, near-black glass on dark.
- [Search input](https://ui.chaicode.com/docs/components/search-input): A search box for listing toolbars, with the icon inside.
- [Select](https://ui.chaicode.com/docs/components/select): A native select in the toolbar style.
- [Segmented](https://ui.chaicode.com/docs/components/segmented): The grid and list switch, with the warm brown active segment.
- [Icon button](https://ui.chaicode.com/docs/components/icon-button): The size-9 toolbar square, boxed or ghost.
- [Dialog](https://ui.chaicode.com/docs/components/dialog): A portalled modal with a focus trap, Escape to close and a frosted backdrop.
- [Confirm dialog](https://ui.chaicode.com/docs/components/confirm-dialog): For actions that cannot be undone: focus on the safe choice, optional type-to-confirm.
- [Toast](https://ui.chaicode.com/docs/components/toast): Bottom-centre confirmations in the card style that leave on their own.
- [Dropdown menu](https://ui.chaicode.com/docs/components/dropdown-menu): Radix dropdown, frosted, with a warm hairline and the brand colour on focus.
- [Avatar](https://ui.chaicode.com/docs/components/avatar): shadcn avatar with a warm hairline ring.
- [Switch](https://ui.chaicode.com/docs/components/switch): shadcn switch, flat and neutral.
- [Checkbox](https://ui.chaicode.com/docs/components/checkbox): shadcn checkbox, flat and neutral.
- [Animated badge](https://ui.chaicode.com/docs/components/animated-badge): The hero pill with an orange glint running round its 1px border.
- [Logo](https://ui.chaicode.com/docs/components/logo): The ChaiCode cup that rocks, liquid that bobs and a bouncing "i" dot, with or without the wordmark.
- [Menu toggle](https://ui.chaicode.com/docs/components/menu-toggle): Three bars that morph into an X, with a little overshoot.
- [Shiny text](https://ui.chaicode.com/docs/components/shiny-text): A highlight sweeping across grey text. Once per page at most.
- [Fancy arrow](https://ui.chaicode.com/docs/components/fancy-arrow): The hand-drawn looping arrow.
- [Tilt card](https://ui.chaicode.com/docs/components/tilt-card): A card that turns toward the pointer, with layers that rise on hover.
- [Card swap](https://ui.chaicode.com/docs/components/card-swap): A 3D stack of cards where the front one drops away and returns at the back.
- [Disclosure](https://ui.chaicode.com/docs/components/disclosure): Content that eases open below a trigger, by click or on hover.
- [Media frame](https://ui.chaicode.com/docs/components/media-frame): A rounded image that goes from a little grey to full colour on hover, with a vignette.
- [Rotating word](https://ui.chaicode.com/docs/components/rotating-word): A headline word that swaps with a blur and a rise, without moving the layout.
- [Share buttons](https://ui.chaicode.com/docs/components/share-buttons): LinkedIn, X, WhatsApp and copy link, each tagged with ?via=share.
- [Navbar](https://ui.chaicode.com/docs/components/navbar): Sticky transparent header that blurs on scroll, as the chaicode menu button or inline dropdown groups.
- [Footer](https://ui.chaicode.com/docs/components/footer): Logo column, up to four columns of links, and the faded warm hairline on top.
- [Hero](https://ui.chaicode.com/docs/components/hero): Badge, headline, a lead with one highlight, the solid and outline pair, and one piece of media.
- [Section head](https://ui.chaicode.com/docs/components/section-head): The 30px section heading with a highlighted subtitle and an optional View all.
- [Listing](https://ui.chaicode.com/docs/components/listing): ListingHead, Toolbar, CardGrid, ListCard and ClearFilters: the index page kit.
- [Course card](https://ui.chaicode.com/docs/components/course-card): Image card with badges, rating, chips, struck-through price, saving and View details.
- [Event card](https://ui.chaicode.com/docs/components/event-card): A poster-only card: the image carries the design.
- [Cohort card](https://ui.chaicode.com/docs/components/cohort-card): Tilt card with a live dot, the name in Anton, orbiting tool icons and film grain.
- [Carousel](https://ui.chaicode.com/docs/components/carousel): Embla with 3s autoplay that stops on hover, faded edges and round arrow buttons.
- [Feature bento](https://ui.chaicode.com/docs/components/feature-bento): Three cells over four, frosted, each led by a tinted title badge.
- [Testimonials](https://ui.chaicode.com/docs/components/testimonials): Portrait video stories with a frosted name bar, and review cards from X.
- [Stat strip](https://ui.chaicode.com/docs/components/stat-strip): Big numbers with short labels in a row.
- [CTA panel](https://ui.chaicode.com/docs/components/cta-panel): The closing call to action: an inverted panel with grain and one button.
- [App badges](https://ui.chaicode.com/docs/components/app-badges): App Store and Google Play badges.
- [Instructor](https://ui.chaicode.com/docs/components/instructor): Name, bio with one highlight, social links and a portrait that fades out.
- [Page shell](https://ui.chaicode.com/docs/components/page-shell): The frame every page sits in: background, navbar, one max-w-6xl column and the footer, with the site links in one place.
- [Landing page](https://ui.chaicode.com/docs/components/landing-page): Hero, stats, cohorts, courses, why us, reviews and a closing call to action, in the chaicode.com order.
- [Listing page](https://ui.chaicode.com/docs/components/listing-page): The udemy page: head, toolbar with sort and grid or list, and course cards.
- [Events page](https://ui.chaicode.com/docs/components/events-page): The events page: head, count and posters two to a row.
- [Auth shell](https://ui.chaicode.com/docs/components/auth-shell): The pieces auth pages share: the quiet centred layout, labelled fields, password toggle, Google and GitHub buttons, errors.
- [Sign in page](https://ui.chaicode.com/docs/components/sign-in-page): Email and password, Google and GitHub, forgot password and the way to sign up.
- [Sign up page](https://ui.chaicode.com/docs/components/sign-up-page): Name, email and a password of eight or more, Google and GitHub, and the terms line.
- [Forgot password page](https://ui.chaicode.com/docs/components/forgot-password-page): Ask for a reset link, then a check-your-inbox screen that does not reveal who has an account.
- [Tabs](https://ui.chaicode.com/docs/components/tabs): Line tabs for page sections, or the segmented box for switching views.
- [Accordion](https://ui.chaicode.com/docs/components/accordion): The chaicode.com FAQ: frosted pills that ease open, one or many at a time.
- [Table](https://ui.chaicode.com/docs/components/table): Chai Prep's sheet table: hairline frame, uppercase data heads, rows that lighten on hover.
- [Pagination](https://ui.chaicode.com/docs/components/pagination): Page numbers with an ellipsis, as links or with onChange.
- [Breadcrumbs](https://ui.chaicode.com/docs/components/breadcrumbs): Where a page sits: grey links, the current page in white.
- [Tooltip](https://ui.chaicode.com/docs/components/tooltip): A short label on hover or focus, inverted and small.
- [Popover](https://ui.chaicode.com/docs/components/popover): A small frosted panel tied to a trigger.
- [Drawer](https://ui.chaicode.com/docs/components/drawer): A panel that slides in from an edge, with a focus trap.
- [Field](https://ui.chaicode.com/docs/components/field): Label, hint and error wired to any control, plus Fieldset for groups.
- [Textarea](https://ui.chaicode.com/docs/components/textarea): The input's look for longer text, growing with its content.
- [Radio group](https://ui.chaicode.com/docs/components/radio-group): One choice from a few, with optional hints.
- [Checkbox group](https://ui.chaicode.com/docs/components/checkbox-group): Several choices with one array value.
- [Input OTP](https://ui.chaicode.com/docs/components/input-otp): A one-time code, one box per digit, with paste and SMS autofill.
- [Combobox](https://ui.chaicode.com/docs/components/combobox): A select you can type into, for long lists.
- [Alert](https://ui.chaicode.com/docs/components/alert): A notice, warning or failure as an outline and coloured text, never a filled block.
- [Skeleton](https://ui.chaicode.com/docs/components/skeleton): A grey stand-in for loading content.
- [Spinner](https://ui.chaicode.com/docs/components/spinner): A small turning ring with a screen-reader label.
- [Progress](https://ui.chaicode.com/docs/components/progress): A neutral progress bar. Never orange.
- [Separator](https://ui.chaicode.com/docs/components/separator): A 1px hairline between groups.
- [Kbd](https://ui.chaicode.com/docs/components/kbd): A keyboard key for shortcut hints.
- [Avatar group](https://ui.chaicode.com/docs/components/avatar-group): Overlapping avatars with a +N.