# Clinia UI

> Clinia's design system: Tailwind v4 tokens (@clinia/tailwindcss) and a shadcn-compatible registry at https://ui.clinia.dev/r. Product apps use the base-luma style, marketing sites base-sera.

- [DESIGN.md](https://ui.clinia.dev/DESIGN.md): the whole brand and token spec in one file.
- [Registry index](https://ui.clinia.dev/r/registry.json): every installable item.

## Getting started

- [Introduction](https://ui.clinia.dev/docs/getting-started.md): Clinia UI is Clinia's design system: brand tokens, shadcn components and the rules for using them.
- [Installation](https://ui.clinia.dev/docs/installation.md): Set up Clinia UI in a new or existing Next.js project.
- [Using AI tools](https://ui.clinia.dev/docs/ai-tools.md): How to set up Claude Code and Claude Design so the apps and sites they build follow Clinia's conventions.
- [Migration](https://ui.clinia.dev/docs/migration.md): Move an existing app to Clinia UI.
- [Request a component](https://ui.clinia.dev/docs/request-a-component.md): How to get a component added to @clinia, and what to use until it ships.
- [Changelog](https://ui.clinia.dev/docs/changelog.md): What changed in Clinia UI, release by release.

## Conventions

- [Colour](https://ui.clinia.dev/docs/color.md): The Clinia palette, where each colour is allowed, and the semantic tokens components use.
- [Typography](https://ui.clinia.dev/docs/typography.md): The three type families, the sixteen-step scale, and the rules for using them.
- [Iconography](https://ui.clinia.dev/docs/iconography.md): Google Material Symbols, Rounded weight 300, shipped one module per icon.
- [Theming](https://ui.clinia.dev/docs/theming.md): How the token-based theme works, and how to switch between light and dark.
- [Accessibility](https://ui.clinia.dev/docs/accessibility.md): Live WCAG contrast matrix for every semantic colour pairing, computed from the shipped tokens.
- [Content guidelines](https://ui.clinia.dev/docs/content.md): How Clinia writes: the voice, the house style in English and French, and how public content gets approved.
- [Containers](https://ui.clinia.dev/docs/containers.md): Spacing, widths, radius and elevation for the surfaces content sits in, and how they respond to screen size.
- [Logo](https://ui.clinia.dev/docs/logo.md): The Logo component, source files, colour usage, minimum sizes and clear space.
- [Site header](https://ui.clinia.dev/docs/site-header.md): What the header of a Clinia site holds, how it behaves on the home page, inner pages and phones, and what to keep out of it.
- [Favicon](https://ui.clinia.dev/docs/favicon.md): The favicon package: a light and a dark tile of the mark, and how to add it to your site.
- [Motion](https://ui.clinia.dev/docs/motion.md): The timing, easing and reduced-motion rules every Clinia surface shares.

## App conventions

- [Getting started](https://ui.clinia.dev/docs/app/getting-started.md): Why Clinia product apps run the Luma style, and how to set one up.
- [Empty states](https://ui.clinia.dev/docs/app/empty-states.md): What a list, table or page shows when there is nothing in it yet, and how it leads to the next step.
- [Loading](https://ui.clinia.dev/docs/app/loading.md): Which indicator to show while something loads, and when to show none at all.
- [Charts](https://ui.clinia.dev/docs/app/charts.md): Which chart to use for a score, a range or a ranking, and the colour, size, motion and accessibility rules that apply to every chart.
- [Forms and validation](https://ui.clinia.dev/docs/app/forms.md): How Clinia forms label fields, validate input and report errors.
- [Destructive actions](https://ui.clinia.dev/docs/app/destructive-actions.md): How much friction to put in front of deleting, revoking or archiving, based on what a mistake would cost.

## Marketing conventions

- [Getting started](https://ui.clinia.dev/docs/marketing/getting-started.md): Why Clinia marketing sites run the Sera style, and how to set one up.
- [Icons](https://ui.clinia.dev/docs/marketing/icons.md): The custom icon set that extends Clinia's icons for marketing use.
- [Imagery](https://ui.clinia.dev/docs/marketing/imagery.md): Which photo to use on Clinia marketing, how to place it and how to put text on it.
- [Backgrounds](https://ui.clinia.dev/docs/marketing/backgrounds.md): Which background to set behind a marketing hero, section or card, and how to render it at any size.
- [Security & compliance](https://ui.clinia.dev/docs/marketing/compliance.md): The four compliance badges marketing uses, and how to show them.
- [Co-branding](https://ui.clinia.dev/docs/marketing/co-branding.md): How to show the Clinia logo next to a partner's.
- [Social media](https://ui.clinia.dev/docs/marketing/social-media.md): The official profile images and banners for LinkedIn, B Corp, YouTube, GitHub and other social media platforms.
- [Brand exposure](https://ui.clinia.dev/docs/marketing/brand-exposure.md): Every public surface Clinia runs or appears on, and when to link to each from marketing material.
- [Sharing images](https://ui.clinia.dev/docs/marketing/sharing-images.md): The image a link shows when it is shared on LinkedIn, X, Slack or in a message (og:image).
- [SEO](https://ui.clinia.dev/docs/marketing/seo.md): The tags every Clinia marketing page sets in its head: title, description, languages, sharing image and structured data.
- [Line & shape](https://ui.clinia.dev/docs/marketing/line-and-shape.md): The Infinity Band: Clinia's line and shape visual language, and how to use it.
- [Motion](https://ui.clinia.dev/docs/marketing/motion.md): The motion patterns on clinia.com, with live demos and their timing.
- [Scenes](https://ui.clinia.dev/docs/marketing/scenes.md): The illustrated scenes on Clinia's marketing pages: when to use one, how to get one made, and who approves it.
- [Rive scenes](https://ui.clinia.dev/docs/marketing/rive-scenes.md): Animated scenes for marketing pages as Rive files: when to use one, examples, and how to get one made.
- [Patient personas](https://ui.clinia.dev/docs/marketing/personas.md): The six fictional patients in Clinia's scenes, deck figures and post images: who they are, and when to use each.
- [Forms](https://ui.clinia.dev/docs/marketing/forms.md): How marketing forms ask, validate and confirm: contact, demo and newsletter forms on Clinia's sites.
- [Custom components](https://ui.clinia.dev/docs/marketing/custom-components.md): The components Clinia builds for marketing sites, beyond the shadcn set.

## Document conventions

- [Presentations](https://ui.clinia.dev/docs/documents/presentations.md): Pitch decks, client meetings and internal updates in Google Slides, built from three Clinia deck templates.
- [Documents](https://ui.clinia.dev/docs/documents/google-docs.md): Clinia documents in Google Docs: the template, which pages a document has, the rules that make it good, and how to make one with the clinia-docs skill.
- [One-pagers](https://ui.clinia.dev/docs/documents/one-pagers.md): One US Letter page about one offer, sent by sales as a PDF and built from the site's type, colours and line art.

## Components: Form

- [Button](https://ui.clinia.dev/components/button.md): Starts the action the user came to do: save, create, confirm.
- [Input](https://ui.clinia.dev/components/input.md): One line of text, such as a name, an email or a search term.
- [Textarea](https://ui.clinia.dev/components/textarea.md): Several lines of free text, such as a note or a description.
- [Label](https://ui.clinia.dev/components/label.md): Names a form control. A click on it focuses the control, and a screen reader reads it.
- [Checkbox](https://ui.clinia.dev/components/checkbox.md): Turns one option on or off, or picks several from a list.
- [Radio Group](https://ui.clinia.dev/components/radio-group.md): Picks exactly one option from a short list, all visible at once.
- [Switch](https://ui.clinia.dev/components/switch.md): Turns a setting on or off. The change applies right away.
- [Select](https://ui.clinia.dev/components/select.md): Picks one option from a list too long to show as radio buttons.
- [Slider](https://ui.clinia.dev/components/slider.md): Sets a value in a range by dragging, when position matters more than the exact number.
- [Progress](https://ui.clinia.dev/components/progress.md): Shows how far a task has come when its length is known.
- [Field](https://ui.clinia.dev/components/field.md): Wraps a control with its label, description and error, and lays them out vertically or horizontally.
- [Input Group](https://ui.clinia.dev/components/input-group.md): An input with icons, text, keyboard hints or buttons attached to either side.
- [Combobox](https://ui.clinia.dev/components/combobox.md): An input that filters a list of options as the user types.
- [Toggle](https://ui.clinia.dev/components/toggle.md): A two-state button that can be on or off.
- [Toggle Group](https://ui.clinia.dev/components/toggle-group.md): A set of toggles where one or several can be on, such as a view switcher.
- [Native Select](https://ui.clinia.dev/components/native-select.md): The browser's own select, styled. Use it on mobile-first forms or for long, simple lists.
- [Input OTP](https://ui.clinia.dev/components/input-otp.md): Separate boxes for a one-time code, such as two-factor sign-in.
- [Button Group](https://ui.clinia.dev/components/button-group.md): Joins related buttons, or a button and an input, into one control.
- [Calendar](https://ui.clinia.dev/components/calendar.md): A month grid for picking a date or a range.
- [Date Picker](https://ui.clinia.dev/components/date-picker.md): A button that opens a calendar in a popover: a single date, a range, or a date and a time. Composed from Button, Popover, Calendar and Input.

## Components: Display

- [Card](https://ui.clinia.dev/components/card.md): Groups the content and actions about one thing, such as a plan or a source.
- [Badge](https://ui.clinia.dev/components/badge.md): A short status or category label, next to the thing it describes.
- [Avatar](https://ui.clinia.dev/components/avatar.md): Shows a user or an organization as an image, with initials when there is none.
- [Separator](https://ui.clinia.dev/components/separator.md): Divides content into groups, for the eye and for assistive technology.
- [Alert](https://ui.clinia.dev/components/alert.md): A message that stays on the page until the situation it describes changes.
- [Skeleton](https://ui.clinia.dev/components/skeleton.md): Holds the shape of content while it loads, so the layout doesn't jump.
- [Spinner](https://ui.clinia.dev/components/spinner.md): An indicator that something is loading, on its own or inside a button.
- [Empty](https://ui.clinia.dev/components/empty.md): The state a list, table or page shows when there is nothing in it yet, with the next action.
- [Kbd](https://ui.clinia.dev/components/kbd.md): Shows a keyboard key or shortcut.
- [Scroll Area](https://ui.clinia.dev/components/scroll-area.md): A scrolling region with a styled scrollbar that matches the platform's behaviour.
- [Item](https://ui.clinia.dev/components/item.md): A row with media, a title, a description and actions, for lists of sources, files, or clinicians.
- [Aspect Ratio](https://ui.clinia.dev/components/aspect-ratio.md): Keeps an image or video at a fixed ratio as it resizes.
- [Carousel](https://ui.clinia.dev/components/carousel.md): A row of slides the user can swipe or step through.
- [Collapsible](https://ui.clinia.dev/components/collapsible.md): Shows and hides one section of content.

## Components: Overlay

- [Accordion](https://ui.clinia.dev/components/accordion.md): Stacks sections under headings that open on demand, for long content read in parts.
- [Tabs](https://ui.clinia.dev/components/tabs.md): Switches between views of the same subject without leaving the page.
- [Dialog](https://ui.clinia.dev/components/dialog.md): Opens a short, focused task above the page, such as editing a record.
- [Dropdown Menu](https://ui.clinia.dev/components/dropdown-menu.md): A list of actions that opens from a button.
- [Tooltip](https://ui.clinia.dev/components/tooltip.md): A short label that appears on hover or focus, mostly for icon-only controls.
- [Alert Dialog](https://ui.clinia.dev/components/alert-dialog.md): A modal that interrupts the user to confirm a destructive or irreversible action.
- [Sheet](https://ui.clinia.dev/components/sheet.md): A panel that slides in from an edge of the screen, for filters, details and secondary tasks.
- [Popover](https://ui.clinia.dev/components/popover.md): Rich content anchored to a trigger, such as help text or a small form.
- [Command](https://ui.clinia.dev/components/command.md): A searchable list of actions, for command palettes and quick navigation.
- [Sonner](https://ui.clinia.dev/components/sonner.md): Brief, non-blocking notifications that confirm an action or report an error.
- [Drawer](https://ui.clinia.dev/components/drawer.md): A panel that slides up from the bottom of the screen, for touch devices.
- [Hover Card](https://ui.clinia.dev/components/hover-card.md): A preview that opens when a pointer rests on a link, such as a person or a record.
- [Context Menu](https://ui.clinia.dev/components/context-menu.md): A menu of actions that opens on right-click or long-press.

## Components: Data

- [Table](https://ui.clinia.dev/components/table.md): Rows and columns of data to scan and compare.
- [Data Table](https://ui.clinia.dev/components/data-table.md): A table with filtering, sorting, row selection and row actions, composed from Table, Checkbox, Input Group and Dropdown Menu.
- [Pagination](https://ui.clinia.dev/components/pagination.md): Moves between pages of a long list.
- [Chart](https://ui.clinia.dev/components/chart.md): Recharts charts wired to the chart tokens, with a themed tooltip and legend.
- [Resizable](https://ui.clinia.dev/components/resizable.md): Panels the user can resize by dragging the handle between them.

## Components: Navigation

- [Sidebar](https://ui.clinia.dev/components/sidebar.md): The app shell's navigation: collapsible, with groups, badges and an active item.
- [Breadcrumb](https://ui.clinia.dev/components/breadcrumb.md): Shows where the current page sits in the hierarchy, with links back up.
- [Navigation Menu](https://ui.clinia.dev/components/navigation-menu.md): Top-level site navigation with panels of links.
- [Menubar](https://ui.clinia.dev/components/menubar.md): A persistent row of menus, as in a desktop app.

## Components: Custom

- [Code Block](https://ui.clinia.dev/components/code-block.md): Displays syntax-highlighted code on a dark surface, in the Clinia code palette.
- [Cookie Consent](https://ui.clinia.dev/components/cookie-consent.md): Asks each user once which cookies they accept, and lets them change it later.
- [File Upload](https://ui.clinia.dev/components/file-upload.md): A drop zone and a file list for uploads: drag or browse, with progress, success and errors per file.
- [Logo](https://ui.clinia.dev/components/logo.md): Clinia's wordmark and mark as React components that take the surrounding text colour.

## Components: Custom: marketing only

- [Brand Background](https://ui.clinia.dev/components/brand-background.md): Sets the Infinity Band behind a marketing section or card: a vector band, blurred or sharp, or a line shape, sharp at any size.
- [CTA](https://ui.clinia.dev/components/cta.md): The clinia.com call to action: a mono uppercase label beside a square arrow tile.
- [Logo Strip](https://ui.clinia.dev/components/logo-strip.md): Scrolls a row of customer logos in a loop, in one colour. Sites pass their own logos as children and set their own claim beside it.
- [Scene](https://ui.clinia.dev/components/scene.md): Composes a clinia.com-style patient graph in code: a card, entity pills, relation tags and lines that build in on scroll.