Base UI and StyleX components built to one design system: forms, overlays, data tables, charts and AI chat.
A callout with an icon, a title, a description and an action, its status on the icon.
A dialog that confirms an action, on the dialog's surface.
Usage snippets from the Alert Dialog docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/alert-dialog/index.md
Usage snippets from the Alert docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/alert/index.md
A card asking to allow a tool call, with its arguments and answer buttons.
Usage snippets from the Approval docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/approval/index.md
A file or image with its name, details, upload state and actions.
Usage snippets from the Attachment docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/attachment/index.md
A user's picture with a fallback, a status badge, and groups that overlap.
Usage snippets from the Avatar docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/avatar/index.md
A small label in the button's five variants, with icons, a spinner or a link.
Usage snippets from the Badge docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/badge/index.md
Tokens, color scales, theme, fonts, reset and focus ring every component builds on.
A trail of links to the pages above the current one.
Usage snippets from the Breadcrumb docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/breadcrumb/index.md
Five variants for every level of emphasis, in four sizes, each with an icon-only square.
Usage snippets from the Button docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/button/index.md
Joins buttons, inputs and text into one control, across or down.
Usage snippets from the Button Group docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/button-group/index.md
A month grid for picking a day or a range, with the selection in the info color.
Usage snippets from the Calendar docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/calendar/index.md
Small text for metadata and labels, in four sizes.
Usage snippets from the Caption docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/caption/index.md
A bordered surface that groups related content, with a header, content and footer.
Usage snippets from the Card docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/card/index.md
Renders a TanStack Charts definition in the theme's series palette, with a tooltip and a legend that toggles series.
Usage snippets from the Chart docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/chart/index.md
A small square that fills with the accent when checked.
Usage snippets from the Checkbox docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/checkbox/index.md
A source's pill in an answer, opening a card with its publication, headline and date.
Usage snippets from the Citation docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/citation/index.md
Code inside running text, in mono on a fill.
Code in a tray, with a title, actions, line numbers and diffs. The app highlights it.
Usage snippets from the Code Block docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/code-block/index.md
Usage snippets from the Code docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/code/index.md
A section that opens and closes, growing to its height.
Usage snippets from the Collapsible docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/collapsible/index.md
A searchable command list on Base UI's inline Autocomplete, inline or in a dialog.
Usage snippets from the Command docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/command/index.md
A button that copies text and shows a tick for a moment.
Usage snippets from the Copy Button docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/copy-button/index.md
Renders a TanStack Table as a Table, virtualized, with sorting, selection, an action bar, pagination, column visibility and TanStack Query states.
Usage snippets from the Data Table docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/data-table/index.md
A button showing a range of days, opening a two-month calendar with optional presets beside it.
Usage snippets from the Date Range Picker docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/date-range-picker/index.md
A centered surface over a dimmed page, for a decision that needs full attention.
Usage snippets from the Dialog docs, one file per section. Read them; don't add them: they aren't standalone modules. Full page: https://constella.aayush.cv/docs/components/dialog/index.md
A menu of actions from a button, with groups, toggles, choices, submenus and filtering.