# grani: every component by family Install first: https://grani.arseni.work/guide/installation.md ## Data Records in lists: the data table, its toolbar, filters, columns, cells and pages, and a log of changes. - [Avatar](https://grani.arseni.work/components/avatar) (stable): Recognize a person by their photo, with initials shown while the photo loads or if it is unavailable. - [Data table](https://grani.arseni.work/components/data-table) (block, stable): Find and work with records in one place: search and filters above a table with selection and pages, and clear loading and error states. - [Filter](https://grani.arseni.work/components/filter) (stable): Open filter choices from a toolbar button and narrow a list by one or more groups of options. - [Filter list](https://grani.arseni.work/components/filter-list) (stable): Narrow results by ticking options that apply at once; a search field appears when there are six or more. - [Log](https://grani.arseni.work/components/log) (stable): Follow a record's history: who changed what and when, with complete old and new values shown together. - [Pagination](https://grani.arseni.work/components/pagination) (stable): Move between pages with Previous, Next and page numbers below a list or table. - [Table](https://grani.arseni.work/components/table) (stable): Compare records in columns, sort and select rows and act on a row, with clear states for loading, empty results and errors. - [Table columns](https://grani.arseni.work/components/table-columns) (stable): Choose which columns to show and keep that choice for later visits in the same browser. - [Table toolbar](https://grani.arseni.work/components/table-toolbar) (stable): Keep search, filters and actions together above the table they affect. ## Charts Numbers over time and parts of a whole: area, bar and donut charts, sparklines and the card they stand in. - [Area chart](https://grani.arseni.work/components/area-chart) (stable): Follow values over time as lines and filled areas. Explore each point from the keyboard, with gaps shown as missing data rather than zero. - [Bar chart](https://grani.arseni.work/components/bar-chart) (stable): Compare amounts across periods with grouped or stacked bars and a plan line, with a marker for a period still in progress. - [Chart card](https://grani.arseni.work/components/chart-card) (block, stable): Show a chart with its title and key number; the card keeps its space while loading and says when the result is empty or an update failed. - [Delta](https://grani.arseni.work/components/delta) (stable): See how much a value changed as a signed percentage, and whether the change is for the better. - [Donut chart](https://grani.arseni.work/components/donut-chart) (stable): Compare the parts of a total in a ring chart, with the total in the center and each part available from the keyboard. - [Sparkline](https://grani.arseni.work/components/sparkline) (stable): See a value's recent trend beside the number, with gaps where data is missing. ## Form Fields a person fills in: text, choices and files, each with its label and error. - [Checkbox](https://grani.arseni.work/components/checkbox) (stable): Choose yes or no by clicking the box or its label; the tick shows the value the app accepted. - [Code input](https://grani.arseni.work/components/code-input) (stable): Enter a one-time code by typing, pasting or, where the browser supports it, autofill from a message, and let the app know when the code is complete. - [Dropzone](https://grani.arseni.work/components/dropzone) (stable): Add files by dragging or browsing; a message names each file that cannot be added and says why. - [Field](https://grani.arseni.work/components/field) (stable): Give a control its label, hint and error message, connected so a screen reader reads them with it. - [Input](https://grani.arseni.work/components/input) (stable): Enter a single line of text, a password or a number in the app’s local format, such as 1 234,50 or 1,234.50. - [Password field](https://grani.arseni.work/components/password-field) (stable): Set a new password by typing or generating one, check it on screen and copy it; a screen reader confirms the generation without reading the password. - [List field](https://grani.arseni.work/components/list-field) (pattern, stable): Search a list and add entries from one field. Paste a column to add several entries, and recover your text if adding fails. - [Radio group](https://grani.arseni.work/components/radio-group) (stable): Choose one answer from a short list, cards or a segmented bar; the whole row or card is the click target. - [Scale input](https://grani.arseni.work/components/scale-input) (stable): Give a rating on a short labeled scale and, where clearing is allowed, take it back by choosing the same value again. - [Select](https://grani.arseni.work/components/select) (stable): Search for and choose one or more options. Enter selects an option without also submitting the form. - [Stepper](https://grani.arseni.work/components/stepper) (stable): Count things with minus and plus, such as pieces in a cart or guests on a booking, or type the number when it is far from the current one. - [Switch](https://grani.arseni.work/components/switch) (stable): Change an on/off setting immediately, returning to the previous position if the app rejects the change. - [Textarea](https://grani.arseni.work/components/textarea) (stable): Write several lines, such as a note, address or biography, in a field that can grow with the text. ## Dates Picking a day, a time or a period: the calendar, the date and time pickers and the date range. - [Calendar](https://grani.arseni.work/components/calendar) (stable): Choose a day or date range from a month view, using the mouse or keyboard. - [Date picker](https://grani.arseni.work/components/date-picker) (stable): Type a date as your language writes it, or pick it from a calendar or a preset, while the field keeps a steady width. - [Date range](https://grani.arseni.work/components/date-range) (stable): Filter records by a period such as “This month”, which stays current, or choose two dates in either order. - [Time picker](https://grani.arseni.work/components/time-picker) (stable): Choose hours and minutes or type a time such as 2:30p or 1430. A valid time is kept even if it is not among the listed options. ## Actions What a person presses: buttons, icon and copy buttons, groups and links. - [Button](https://grani.arseni.work/components/button) (stable): Start an action and see when it is running, with further presses blocked while the button is loading. - [Copy button](https://grani.arseni.work/components/copy-button) (stable): Copy a value in one press and see whether it reached the clipboard. - [Button group](https://grani.arseni.work/components/button-group) (stable): Keep related controls together, such as a main action and its menu or a field and its submit button. - [Icon button](https://grani.arseni.work/components/icon-button) (stable): Offer a compact action, such as Search or Close, with an icon and an accessible name for screen readers. - [Link](https://grani.arseni.work/components/link) (stable): Follow an underlined link in text, marked when it opens a new tab. ## Overlays What opens over the page: dialogs, drawers, menus, popovers, toasts and tooltips. - [Confirm](https://grani.arseni.work/components/confirm) (pattern, stable): Check a decision before an action that cannot be undone, and show progress while the confirmed action runs. - [Crud drawer](https://grani.arseni.work/components/crud-drawer) (pattern, stable): Edit a record beside its list and open related lists within the same panel. - [Drawer](https://grani.arseni.work/components/drawer) (stable): Read or edit details in a side panel without leaving the list or page behind it. - [Menu](https://grani.arseni.work/components/menu) (pattern, stable): Open a menu of available actions, such as exporting records, changing a row or managing your account. - [Modal](https://grani.arseni.work/components/modal) (stable): Complete a short task in a dialog, such as filling a form or reviewing a record's details. - [Popover](https://grani.arseni.work/components/popover) (stable): Open a small panel of options beside a button while keeping the rest of the page available. - [Toaster](https://grani.arseni.work/components/toaster) (stable): See a short message about an action's progress or result, with an action such as Undo when available. - [Tooltip](https://grani.arseni.work/components/tooltip) (stable): Get a short hint on hover, keyboard focus or tap; anything essential stays on the page outside the tooltip. ## Layout How a screen is put together: the app shell, cards, lists, stacks and tabs. - [App shell](https://grani.arseni.work/components/app-shell) (stable): Organize an app around a sidebar for navigation and a main area for the page you are working on. - [Aspect ratio](https://grani.arseni.work/components/aspect-ratio) (stable): Reserve space for a photo or video before it loads, so nearby content stays in place. - [Card](https://grani.arseni.work/components/card) (stable): Group one part of a page into a card with a title, content and an optional footer. - [Header](https://grani.arseni.work/components/header) (stable): Introduce a page or section with a title, a short explanation and the actions available there. - [List](https://grani.arseni.work/components/list) (stable): Present related rows in a card, separated by lines so each item is easy to distinguish. - [List item](https://grani.arseni.work/components/list-item) (stable): Show one row with a title and description and an action or value beside it. - [Reveal](https://grani.arseni.work/components/reveal) (stable): Open details where you need them and collapse them again without leaving the page. - [Separator](https://grani.arseni.work/components/separator) (stable): Separate groups in a menu, toolbar or card with a simple dividing line. - [Stack](https://grani.arseni.work/components/stack) (stable): Arrange related content vertically or horizontally with consistent spacing between groups, headings and sections. - [Tabs](https://grani.arseni.work/components/tabs) (stable): Switch between sections of the same screen without showing them all at once. - [Truncate](https://grani.arseni.work/components/truncate) (pattern, stable): Keep a long value on one line with an ellipsis, and reveal the full text on hover or tap when it does not fit. ## Status How things stand: badges, counts, progress, loading and empty states. - [Badge](https://grani.arseni.work/components/badge) (stable): Add a short status or tag beside an item, such as “Draft” or “Paid”. - [Count](https://grani.arseni.work/components/count) (stable): Show a compact count beside a label, or a dot when only the presence of an update matters. - [Indicator](https://grani.arseni.work/components/indicator) (stable): Mark an item that needs attention with a count or dot in its corner. - [No data](https://grani.arseni.work/components/no-data) (pattern, stable): Understand why an area is empty and what you can do next. - [Progress](https://grani.arseni.work/components/progress) (stable): See how much of a task or target is complete when its progress can be measured. - [Skeleton](https://grani.arseni.work/components/skeleton) (stable): Show where content will appear while it loads, holding its space so the page around it moves less. - [Spinner](https://grani.arseni.work/components/spinner) (stable): Show that work is in progress where the surrounding component has no loading state of its own.