# Keston UI > The Vue 3 component library for every Keston product (`@thekestongroup/ui`), built on Reka UI and Tailwind CSS v4. Every page below is Markdown. Component pages include when to use the component, its behaviour and accessibility rules, and its exact TypeScript API from the source. Use the library's components and tokens rather than building new ones. ## Guide - [Getting started](https://ui.keston.co/guide/getting-started.md): Install the library, add the theme, use a component. - [Colours](https://ui.keston.co/guide/colours.md): The colour tokens and what each is for. - [Typography](https://ui.keston.co/guide/typography.md): Lato, text sizes, weights and writing. ## Components - [AppShell](https://ui.keston.co/components/app-shell.md): The layout of every Keston app page: the shared Header on top, the app's Sidebar on the left, the page in the middle. - [Header](https://ui.keston.co/components/header.md): The bar across the top of every Keston app: menu button, app name, an optional middle area, actions and the account menu. The same in every app; each part can be overridden. - [PageHeader](https://ui.keston.co/components/page-header.md): The top of a page: breadcrumb, title, status, description and the page's main actions. - [Avatar](https://ui.keston.co/components/avatar.md): A person's picture, or their initials on a primary circle, optionally with a profile card on hover. - [AvatarGroup](https://ui.keston.co/components/avatar-group.md): Several people as overlapping avatars, each with a profile on hover, with the rest as "+N". - [Badge](https://ui.keston.co/components/badge.md): A small label for a status, count or category. - [Button](https://ui.keston.co/components/button.md): Starts an action: saving, cancelling, opening a panel, deleting. - [Card](https://ui.keston.co/components/card.md): A white panel that groups related content on a page: a form section, a summary, a stat, a table. - [Chip](https://ui.keston.co/components/chip.md): A small item someone has chosen or entered, e.g. a recipient or a filter, optionally with × to remove it. - [Divider](https://ui.keston.co/components/divider.md): A thin line between groups of content, optionally with a short label in the middle. - [Spinner](https://ui.keston.co/components/spinner.md): A small circular loading indicator: spinning while there's no telling how long, or a ring that fills up. - [Progress](https://ui.keston.co/components/progress.md): A thin bar showing how far along something is: a line, segments for steps, or indeterminate. - [FormField](https://ui.keston.co/components/form-field.md): The shell around every text-like field: label, helper, the bordered box, and the status message underneath. - [Input](https://ui.keston.co/components/input.md): A single line of text: a name, an email address, a search. - [InputNumber](https://ui.keston.co/components/input-number.md): A number with − and + buttons, e.g. a year group, a quantity or an amount. - [InputDate](https://ui.keston.co/components/input-date.md): A date, typed in almost any form ("26/01/2009", "tmrw", "next friday") or picked from a calendar. - [InputRichText](https://ui.keston.co/components/input-rich-text.md): Several lines of text with bold, italic and underline, e.g. notes on a student or an application. - [InputPassword](https://ui.keston.co/components/input-password.md): A password field with a Show / Hide button, for signing in and choosing a password. - [InputCode](https://ui.keston.co/components/input-code.md): A one-time code from an authenticator app, an email or a text message, with one box per character. - [Select](https://ui.keston.co/components/select.md): Choose one or more options from a list that opens below the field. - [Checkbox](https://ui.keston.co/components/checkbox.md): A yes / no answer that's sent with a form, e.g. "Has a sibling at the school" or agreeing to terms. - [RadioGroup](https://ui.keston.co/components/radio-group.md): One choice from a few options that people should see side by side. - [Switch](https://ui.keston.co/components/switch.md): Turns a setting on or off straight away, with no Save button. - [Calendar](https://ui.keston.co/components/calendar.md): A month of days to choose one from, with the month and year opening grids of months and years. - [Table](https://ui.keston.co/components/table.md): Rows of data with column headings, which people can sort: applicants, classes, invoices. - [StatTile](https://ui.keston.co/components/stat-tile.md): One number that matters, in a small Card, with how it's changed. - [SummaryList](https://ui.keston.co/components/summary-list.md): Labelled values: a record's details, figures in a summary, or answers to check before submitting. - [Checklist](https://ui.keston.co/components/checklist.md): Steps towards something, ticked off as they're done. - [RelativeTime](https://ui.keston.co/components/relative-time.md): A time as people say it, "3 hours ago", with the exact date and time in a tooltip. - [Age](https://ui.keston.co/components/age.md): Someone's age, "13", with their date of birth and any birthday this week in a tooltip. - [Breadcrumb](https://ui.keston.co/components/breadcrumb.md): Where the current page is: its parents, then the page itself, e.g. School › School Structure › New School Year Setup. - [Sidebar](https://ui.keston.co/components/sidebar.md): The app's main navigation, down the left of the page, optionally collapsing to icons. - [Link](https://ui.keston.co/components/link.md): A text link, in the size and colour of the text around it, with an external-page icon when it opens in a new tab. - [Popover](https://ui.keston.co/components/popover.md): A small panel that floats next to the thing that opened it, e.g. a menu, a filter or a profile card. - [Slideover](https://ui.keston.co/components/slideover.md): A full-height panel that slides in from the side, e.g. to edit a record or fill in a multi-step form without leaving the page. - [Tooltip](https://ui.keston.co/components/tooltip.md): A short label on hover or keyboard focus: the exact date behind "3 hours ago", a birthday behind an age, what an icon button does. - [InfoTip](https://ui.keston.co/components/info-tip.md): A `?` that explains the thing beside it: a field's label, a table column, a figure. - [Notification](https://ui.keston.co/components/notification.md): Something people should know about: a toast when it happens, and a list of past ones behind the bell in the Header. ## Examples - [Keston ID pages](https://raw.githubusercontent.com/thekestongroup/ui/main/src/examples/KestonIdPages.stories.ts): Sign-in leading to OAuth consent, two-step code (Vue source) - [App pages](https://raw.githubusercontent.com/thekestongroup/ui/main/src/examples/AppPages.stories.ts): Whole app pages built from the components (Vue source) - [School pages](https://raw.githubusercontent.com/thekestongroup/ui/main/src/examples/SchoolPages.stories.ts): Records, reviews, booking, settings (Vue source) - [Form layout](https://raw.githubusercontent.com/thekestongroup/ui/main/src/examples/FormLayout.stories.ts): A validated form (Vue source) ## Optional - [Changelog](https://ui.keston.co/changelog.md): What changed in each version. - [Everything in one file](https://ui.keston.co/llms-full.txt)