# ndekoui: full catalogue > ndekoui is an open-source React library under the MIT licence: 685 components in 36 categories, 66 blocks, 10 templates and 72 primitives, built on Base UI, motion and Tailwind CSS 4. Every item animates its changes of state and installs with the shadcn CLI, with the theme and the primitives it uses. ## Install Each item is a shadcn registry item at https://ui.ndekocode.dev/r/.json. For example: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-28.json`. Editors and assistants can also connect to the MCP server at https://ui.ndekocode.dev/mcp to search the catalogue, read the source of an item and get its install command. ## Primitives - button, Button: Pill buttons in six variants and six sizes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button.json` - input, Input: A text field on the shared control recipe. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input.json` - textarea, Textarea: A field that grows with its content. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea.json` - label, Label: The label of a control. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/label.json` - field, Field: Label, description and error wired to a control. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/field.json` - badge, Badge: Soft status pairs, readable in both themes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge.json` - chip, Chip: A 3D label in any colour, for assigned values. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chip.json` - card, Card: A surface on one hairline with a soft shadow. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/card.json` - separator, Separator: A one device pixel line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/separator.json` - skeleton, Skeleton: A light placeholder while content loads. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/skeleton.json` - kbd, Kbd: A key cap for shortcuts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/kbd.json` - avatar, Avatar: A picture with a fallback, opaque in stacks. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar.json` - checkbox, Checkbox: A checkbox whose mark scales in. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox.json` - switch, Switch: A switch whose thumb stretches while pressed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch.json` - radio-group, Radio Group: Native radio semantics, drawn on the theme. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-group.json` - spinner, Spinner: A loader with an accessible name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/spinner.json` - selected-mark, Selected Mark: The mark of the picked row in a menu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/selected-mark.json` - status-orb, Status Orb: The mark of a message kind: success, error, warning, info. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/status-orb.json` - tooltip, Tooltip: A small bubble with an arrow, after a short pause. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip.json` - popover, Popover: A raised panel anchored to its trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover.json` - dropdown-menu, Dropdown Menu: Action menus with 32px rows, checkable items and submenus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-menu.json` - animated-size, Animated Size: A container that animates its height or width to fit content that changes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/animated-size.json` - dialog, Dialog: A modal dialog that fades and scales in and resizes with its content. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog.json` - alert-dialog, Alert Dialog: A dialog that asks to confirm a consequence. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-dialog.json` - sheet, Sheet: A dialog docked to an edge, floating 8px from it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/sheet.json` - select, Select: A select on the control recipe with a menu popup. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select.json` - tabs, Tabs: Underlined or segmented tabs with one sliding indicator. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs.json` - accordion, Accordion: Panels that open by animating their height. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion.json` - collapsible, Collapsible: One panel that opens and closes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/collapsible.json` - toggle, Toggle: A button that stays pressed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/toggle.json` - toggle-group, Toggle Group: Toggles that share one value. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/toggle-group.json` - slider, Slider: One or several thumbs on a thin track. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider.json` - progress, Progress: A thin bar with an optional label and value. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/progress.json` - scroll-area, Scroll Area: Thin scrollbars that show while you scroll. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/scroll-area.json` - hover-card, Hover Card: A raised card that previews a link after a short pause. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/hover-card.json` - checkbox-tree, Checkbox Tree: Nested checkboxes where a parent reflects its children. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-tree.json` - breadcrumb, Breadcrumb: Where the page sits, as links. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb.json` - pagination, Pagination: Pages as pill links, the current one outlined. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination.json` - select-native, Native Select: The browser select on the control recipe. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-native.json` - table, Table: Rows on hairlines with tabular figures. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table.json` - cropper, Cropper: An image crop area you can drag and zoom. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/cropper.json` - command, Command: A searchable list of actions, inline or in a palette dialog. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/command.json` - combobox, Combobox: A filterable select, single or multiple with chips. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/combobox.json` - otp-field, OTP Field: One box per character of a code. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/otp-field.json` - navigation-menu, Navigation Menu: Site navigation whose panel slides and resizes between items. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navigation-menu.json` - stepper, Stepper: Numbered steps that fill as you advance. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper.json` - timeline, Timeline: Events on a line, past ones in the brand hue. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline.json` - tree, Tree: Nested items you can expand, select and drag. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree.json` - calendar, Calendar: A month grid for days and ranges. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar.json` - calendar-rac, Calendar (React Aria): Accessible calendar and range calendar on React Aria. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-rac.json` - datefield-rac, Date Field (React Aria): Dates and times typed segment by segment. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/datefield-rac.json` - sonner, Toaster: Toasts that carry a status orb, bottom right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/sonner.json` - chat-motion, Chat Motion: The swap and the fold the chat pieces share: an icon that becomes another, a panel that folds into its trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-motion.json` - chat-container, Chat Container: A message list that follows new content while you are at the bottom and lets go when you scroll up. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-container.json` - chat-code-block, Chat Code Block: Code highlighted in the light and dark themes, with a copy button that turns into a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-code-block.json` - chat-markdown, Chat Markdown: Model output as safe markdown: no raw HTML, external links without referrer, code blocks highlighted. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-markdown.json` - chat-message, Chat Message: A message with its avatar or glyph, a bubble or plain body, and actions explained by tooltips. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-message.json` - chat-prompt-input, Chat Prompt Input: A composer whose textarea grows with the text, with actions and a Send button that becomes Stop. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-prompt-input.json` - chat-loader, Chat Loader: Waiting marks for a reply: a spinner, dots, a pulse, bars or a Thinking label that breathes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-loader.json` - chat-reasoning, Chat Reasoning: The reasoning behind a reply, open while it streams and folded once the answer starts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-reasoning.json` - chat-tool, Chat Tool: A tool call with its state, opening onto its input and output and resizing as the output arrives. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-tool.json` - chat-steps, Chat Steps: Steps the assistant took, on a thin line, behind a trigger that opens and closes them. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-steps.json` - chat-source, Chat Source: A cited page as a small pill that previews its title and summary after a short pause. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-source.json` - chat-scroll-button, Chat Scroll Button: A button that appears once you scroll away from the latest message and brings you back. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-scroll-button.json` - chat-file-upload, Chat File Upload: Files from the picker or dropped on the window, with a layer that shows while they are dragged in. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-file-upload.json` - chat-response-stream, Chat Response Stream: A reply revealed word by word or character by character, from a fixed text or an async stream. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-response-stream.json` - chat-thinking-bar, Chat Thinking Bar: A live Thinking line with a way to open the reasoning or to get the answer now. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-thinking-bar.json` - chat-feedback-bar, Chat Feedback Bar: Asks whether a reply helped and becomes a thank you once you answer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-feedback-bar.json` - chat-system-message, Chat System Message: A notice from the app inside the conversation, neutral, warning or error, with an optional action. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-system-message.json` - chat-prompt-suggestion, Chat Prompt Suggestion: A prompt to start from, as a pill or as a list row that marks the typed match. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-prompt-suggestion.json` - chat-chain-of-thought, Chat Chain of Thought: Steps of thought on one thread, each opening onto its details. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-chain-of-thought.json` - chat-image, Chat Image: An image a model produced, from base64 or raw bytes, with a placeholder until it is there. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-image.json` ## Components ### Accordion - accordion-01, Accordion with chevron: Questions that open one at a time, with a chevron that turns. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-01.json` - accordion-02, Accordion with plus and minus: A plus that folds into a minus when its answer opens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-02.json` - accordion-03, Accordion with leading chevron: The chevron sits before the question and the answer lines up with the text. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-03.json` - accordion-04, Accordion with leading plus: A plus before each question that folds into a minus when it opens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-04.json` - accordion-05, Accordion with icons: An icon in front of each question and a chevron at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-05.json` - accordion-06, Accordion with icons and plus: An icon in front of each question and a plus that becomes a minus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-06.json` - accordion-07, Accordion with descriptions: Settings sections with a one-line description under each title. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-07.json` - accordion-08, Accordion with descriptions and plus: Settings sections with a description and a plus that becomes a minus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-08.json` - accordion-09, Accordion with icon tiles: Settings sections led by an icon tile, a title and a description. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-09.json` - accordion-10, Accordion with icon tiles and plus: Settings sections led by an icon tile, closed with a plus that becomes a minus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-10.json` - accordion-11, Accordion of cards: Each question on its own card, with a chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-11.json` - accordion-12, Accordion of cards with plus: Each question on its own card, with a plus that becomes a minus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-12.json` - accordion-13, Accordion of cards with leading chevron: Each question on its own card, the chevron before the text. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-13.json` - accordion-14, Accordion of cards with leading plus: Each question on its own card, the plus before the text. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-14.json` - accordion-15, Accordion in one card: Questions stacked as rows of a single card, with a chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-15.json` - accordion-16, Accordion in one card with plus: Questions stacked as rows of a single card, with a plus that becomes a minus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-16.json` - accordion-17, Accordion in one card with leading chevron: Rows of a single card with the chevron before each question. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-17.json` - accordion-18, Accordion in one card with leading plus: Rows of a single card with the plus before each question. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-18.json` - accordion-19, Nested accordion: Each question opens on follow-up questions that open on their own. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-19.json` - accordion-20, Nested accordion with icons: Questions and follow-up questions, each with its own icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/accordion-20.json` ### Activity - activity-01, Task history: Every change to a task with its old and new value, and a time that switches to the exact date on click Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-01.json` - activity-02, Feed by day with filters: Activity grouped under Today and Yesterday, with kind filters that fold rows away and an empty state Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-02.json` - activity-03, Compact side feed: One-line entries for a narrow panel that open in place to show what changed Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-03.json` - activity-04, Team activity stream: Who worked on what with the time spent, a timer glyph on each avatar and a range switch that rescales the bars Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-04.json` - activity-05, Live feed: New updates wait behind a count pill and slide in at the top when you ask for them Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-05.json` - activity-06, Folded runs of changes: Changes one person made in a row fold under their name behind a "more changes" button Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-06.json` - activity-07, Mentions with quotes: Mentions and replies with the quoted comment cut at two lines, opened in place when it runs longer Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/activity-07.json` ### Alert - alert-01, Warning alert: A card with a warning orb for details that need attention. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-01.json` - alert-02, Tinted warning alert: The same warning drawn on the soft warning pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-02.json` - alert-03, Error alert: A card with an error orb for something that failed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-03.json` - alert-04, Tinted error alert: The same error drawn on the soft destructive pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-04.json` - alert-05, Success alert: A card with a success orb that confirms a saved change. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-05.json` - alert-06, Tinted success alert: The same confirmation drawn on the soft success pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-06.json` - alert-07, Info alert: A card with an info orb for a quick note. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-07.json` - alert-08, Tinted info alert: The same note drawn on the soft info pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-08.json` - alert-09, Warning alert with link: A warning card with a link that leads to the fix. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-09.json` - alert-10, Tinted warning alert with link: A warning on its soft pair with a link that leads to the fix. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-10.json` - alert-11, Error alert with list: A card that lists the password rules still unmet. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-11.json` - alert-12, Tinted error alert with list: The unmet password rules on the soft destructive pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/alert-12.json` ### Side panel - aside-01, Task details: Properties as rows with a status menu and assignee chips, sub-issues you check off and a comment box pinned at the foot Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-01.json` - aside-02, Member profile: Presence on the avatar, contact rows, the day split by project in one bar that morphs between today and yesterday Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-02.json` - aside-03, Filters: Status, assignee, priority and due date filters with removable chips and a button that counts the matching tasks Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-03.json` - aside-04, Notification settings: Events by channel as a grid of switches, a group checkbox for each section, quiet hours and a digest Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-04.json` - aside-05, Project details: A read-only project with its properties, progress by status in one bar and members that unfold in place Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-05.json` - aside-06, Workspace sidebar: A workspace switcher, navigation with one travelling highlight, a folding projects group and the account menu Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-06.json` - aside-07, Keyboard shortcuts: Shortcuts grouped by area, filtered as you type with the match highlighted and rows that fold away Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/aside-07.json` ### Avatar - avatar-01, Avatar: A round photo that shows initials while it loads or if it fails. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-01.json` - avatar-02, Initials avatar: Initials on the muted fill for someone without a photo. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-02.json` - avatar-03, Placeholder avatar: A user icon for an account with no photo and no name yet. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-03.json` - avatar-04, Square avatar: A photo avatar with rounded corners. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-04.json` - avatar-05, Online avatar: A photo avatar with a success dot for someone online. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-05.json` - avatar-06, Offline avatar: A photo avatar with a grey dot for someone offline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-06.json` - avatar-07, Square avatar with status: A rounded-corner avatar with an online dot on its top corner. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-07.json` - avatar-08, Verified avatar: A photo avatar with a verified seal on its top corner. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-08.json` - avatar-09, Avatar with count: A photo avatar with an unread count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-09.json` - avatar-10, Square avatar with count: A rounded-corner avatar with an unread count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-10.json` - avatar-11, 20px avatar stack: Four overlapping avatars at 20px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-11.json` - avatar-12, 24px avatar stack: Four overlapping avatars at 24px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-12.json` - avatar-13, 28px avatar stack: Four overlapping avatars at 28px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-13.json` - avatar-14, 32px avatar stack: Four overlapping avatars at 32px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-14.json` - avatar-15, 36px avatar stack: Four overlapping avatars at 36px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-15.json` - avatar-16, 40px avatar stack: Four overlapping avatars at 40px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-16.json` - avatar-17, 48px avatar stack: Four overlapping avatars at 48px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-17.json` - avatar-18, 64px avatar stack: Four overlapping avatars at 64px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-18.json` - avatar-19, 80px avatar stack: Four overlapping avatars at 80px. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-19.json` - avatar-20, Avatar stack with more: Four overlapping avatars and a button for the three others. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-20.json` - avatar-21, Avatar group on a muted pill: Overlapping avatars and a more button on a muted pill. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-21.json` - avatar-22, Avatar group on a card pill: Overlapping avatars and a more button on a card pill. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-22.json` - avatar-23, Avatar group with caption: Small overlapping avatars with a line that says who joined. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/avatar-23.json` ### Badge - badge-01, Badge: The default badge on the soft brand pair. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-01.json` - badge-02, Pill badge: A badge with fully rounded ends. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-02.json` - badge-03, Badge with icon: A badge with a dimmed icon before its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-03.json` - badge-04, Count badge: A compact badge that holds a single count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-04.json` - badge-05, Link badge: A badge that is a link and deepens its tint on hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-05.json` - badge-06, Badge with count: A label followed by a smaller, quieter count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-06.json` - badge-07, Verified badge: An outline badge with a success check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-07.json` - badge-08, Active status badge: An outline badge with a success dot. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-08.json` - badge-09, Pending status badge: An outline badge with a warning dot. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-09.json` - badge-10, Failed status badge: An outline badge with a destructive dot. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-10.json` - badge-11, Selectable badge: A badge that toggles like a checkbox and shows a check when on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-11.json` - badge-12, Removable badge: A badge with a cross that removes it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-12.json` - badge-13, Removable tag: A taller outline tag with a roomy remove button. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/badge-13.json` ### Banner - banner-01, Cookie consent: A raised notice that asks to accept or decline cookies. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-01.json` - banner-02, Announcement link: A centred announcement that links to the news. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-02.json` - banner-03, Upgrade banner: A centred line that points to a plan upgrade. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-03.json` - banner-04, Feature banner: A new feature with a learn more link at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-04.json` - banner-05, Dismissible feature banner: A feature banner that folds away when dismissed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-05.json` - banner-06, Banner with actions: A download and a learn more button, with a dismiss cross. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-06.json` - banner-07, Banner with action and link: A download button next to a learn more link. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-07.json` - banner-08, Centred banner with action: A centred message and one button, with a dismiss cross. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-08.json` - banner-09, Feature launch banner: A title, a short pitch and a button to try the feature. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-09.json` - banner-10, Sale countdown banner: An offer with the hours, minutes and seconds left until midnight. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-10.json` - banner-11, Newsletter banner: A centred line that invites a newsletter subscription. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-11.json` - banner-12, Update banner: A new version notice whose button shows the update running. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/banner-12.json` ### Breadcrumb - breadcrumb-01, Collapsed breadcrumb: A trail whose middle pages fold into a menu behind an ellipsis. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-01.json` - breadcrumb-02, Breadcrumb with folder menu: A folder icon that opens the pages hidden from the trail. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-02.json` - breadcrumb-03, Breadcrumb with home icon: A trail that starts with a home icon instead of a word. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-03.json` - breadcrumb-04, Breadcrumb with icons: Each parent page carries an icon before its name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-04.json` - breadcrumb-05, Slash separators: A trail separated by slashes, as in a file path. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-05.json` - breadcrumb-06, Dot separators: A trail separated by middle dots. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-06.json` - breadcrumb-07, Breadcrumb bar: The trail on a small card with a hairline ring. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-07.json` - breadcrumb-08, Breadcrumb with select: The last step is a select that switches between databases. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/breadcrumb-08.json` ### Button - button-01, Primary button: The default pill for the main action of a surface. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-01.json` - button-02, Disabled button: A primary pill that cannot be pressed yet. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-02.json` - button-03, Large button: The lg pill for the call to action of a page or a dialog. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-03.json` - button-04, Button with icon: A primary pill with a dimmed icon before its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-04.json` - button-05, Destructive button: A destructive pill with a trash icon for deleting. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-05.json` - button-06, Secondary button: A grey pill with a cross icon for dismissing. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-06.json` - button-07, Outline button with trailing icon: An outline pill with an icon after its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-07.json` - button-08, Back button: A ghost button whose arrow nudges back on hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-08.json` - button-09, Continue button: A primary pill whose arrow nudges forward on hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-09.json` - button-10, Email button: A grey pill with a mail icon and an arrow that nudges on hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-10.json` - button-11, Button with chevron: A primary pill with a chevron that hints at more choices. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-11.json` - button-12, Cancel and save: A ghost cancel next to the primary save. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-12.json` - button-13, Saving button: A disabled pill with a spinning loader while work runs. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-13.json` - button-14, Loading button: Clicking fades the label out behind a spinner for a second, then brings it back. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-14.json` - button-15, Button with count: An outline pill with a count on a key cap. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-15.json` - button-16, Button with shortcut: An outline print button that shows its keyboard shortcut. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-16.json` - button-17, Profile button: A primary pill that starts with an avatar and shows a handle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-17.json` - button-18, Avatar button: An avatar with a chevron, ready to open an account menu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-18.json` - button-19, Responsive add button: An add button that keeps only its icon on small screens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-19.json` - button-20, Icon button: A round outline button with a plus icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-20.json` - button-21, Expand button: A plus that turns into a cross when the menu opens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-21.json` - button-22, Icon button with tooltip: A round add button that names itself in a tooltip. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-22.json` - button-23, Menu button: Three lines that fold into a cross when the menu opens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-23.json` - button-24, Bookmark toggle: A toggle that tints when bookmarked, with a tooltip that follows the state. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-24.json` - button-25, Notifications button: A bell with an unread count that clears when clicked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-25.json` - button-26, Theme toggle: A toggle that swaps the sun for the moon when dark mode is on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-26.json` - button-27, Vote buttons: Upvote and downvote joined around a score. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-27.json` - button-28, Primary vote buttons: Upvote and downvote on one primary pill around a score. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-28.json` - button-29, Volume stepper: Minus and plus buttons around a level whose digit and speaker icon follow each step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-29.json` - button-30, Copy button: Copies a link and shows a check for a moment. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-30.json` - button-31, Flip buttons: Two joined icon buttons to flip horizontally or vertically. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-31.json` - button-32, Alignment toggle group: Four joined primary toggles where one alignment stays selected. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-32.json` - button-33, Button group: Files, media and a more button joined into one pill. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-33.json` - button-34, Toggle group: Three joined outline toggles that can all be off. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-34.json` - button-35, Segmented control: A full-width control whose indicator slides to the chosen option. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-35.json` - button-36, Sign in with QR code: A primary sign in joined to a QR code button. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-36.json` - button-37, Preview with link: A preview button joined to a button that opens the link. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-37.json` - button-38, Pinned with options: A primary pinned button with an options chevron at its start. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-38.json` - button-39, Fork button: A primary fork button with a count and an options chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-39.json` - button-40, Split merge button: A merge button whose menu picks the method, and the label resizes to the choice. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-40.json` - button-41, Previous button: A primary pill with a tinted cap holding the back chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-41.json` - button-42, Next button: A primary pill with a tinted cap holding the forward chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-42.json` - button-43, Like button: An outline like button with its count behind a divider. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-43.json` - button-44, Star button: A primary star button with a quiet count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-44.json` - button-45, Social sign in icons: Four icon buttons to sign in with Google, Facebook, X or GitHub. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-45.json` - button-46, Full-width social icons: The four sign in icon buttons sharing the full width. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-46.json` - button-47, Social sign in buttons: Stacked outline buttons that name each sign in provider. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-47.json` - button-48, Social sign in with aligned icons: Stacked buttons with the icon at the start and the label centred. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-48.json` - button-49, Show more button: Switches between show more and show less, and turns its chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-49.json` - button-50, Back link: A link-style button with a back chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-50.json` - button-51, Image upload button: Picks an image, previews it and lets you remove it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-51.json` - button-52, Avatar upload button: A round button that shows the chosen avatar, with a remove badge. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-52.json` - button-53, Directional pad: Four icon buttons around a centre to pan a camera. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-53.json` - button-54, Card button: A two-line outline button with a title, a hint and a chevron. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-54.json` - button-55, Label to icon on hover: On hover the label slides out and a download icon slides in to take its place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-55.json` - button-56, Travelling arrow: The arrow in the cap leaves to the top right on hover while the next one arrives from the bottom left. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-56.json` - button-57, Rolling label: Each letter rolls up on hover and its copy rolls in from below, one after the other. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-57.json` - button-58, Hold to delete: A fill crosses the button while it is held for two seconds, snaps back on release and turns into a confirmation. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-58.json` - button-59, Follow toggle with fill: Following fills the button from the point that was pressed, and unfollowing draws the fill back. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-59.json` - button-60, Publish with states: The label and icon morph from publish to publishing to published, and the width follows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-60.json` - button-61, Download with progress: The button fills with the download progress, counts the percentage and ends on a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-61.json` - button-62, Watch with rolling digits: Only the digits that change roll, in the direction of the change, when the watch count goes up or down. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-62.json` - button-63, Copy install command: A command in a monospace pill that copies itself and swaps its icon for a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-63.json` - button-64, Confirm on second press: The first press turns the button destructive with a three second countdown, the second removes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/button-64.json` ### Date picker - calendar-date-picker-01, Calendar: A react-aria calendar with today picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-01.json` - calendar-date-picker-02, Range calendar: A react-aria range of four days, tinted between its two ends. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-02.json` - calendar-date-picker-03, Calendar with unavailable dates: A react-aria range calendar that skips weekends, past days and booked days. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-03.json` - calendar-date-picker-04, Day picker calendar: A react-day-picker calendar with today picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-04.json` - calendar-date-picker-05, Day picker range: A range of four days that grows from its start to its end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-05.json` - calendar-date-picker-06, Range with closed days: A range calendar that refuses past days, weekends and two closed periods. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-06.json` - calendar-date-picker-07, Multiple days: Several days picked one by one. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-07.json` - calendar-date-picker-08, Round picked day: The picked day drawn as a full circle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-08.json` - calendar-date-picker-09, Round range ends: Circular range ends joined by a tinted band. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-09.json` - calendar-date-picker-10, Navigation on the right: The month on the left and both arrows on the right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-10.json` - calendar-date-picker-11, Month and year selects: Two selects replace the arrows to jump to any month. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-11.json` - calendar-date-picker-12, Year select with arrows: A year select between the month arrows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-12.json` - calendar-date-picker-13, Week numbers: Six weeks shown at all times with their numbers. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-13.json` - calendar-date-picker-14, Back to the current month: A button that brings the current month back into view. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-14.json` - calendar-date-picker-15, Jump to today: A button that picks today and shows its month. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-15.json` - calendar-date-picker-16, Calendar with date field: A typed date and the calendar stay in step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-16.json` - calendar-date-picker-17, Calendar with time field: A calendar followed by a time field with seconds. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-17.json` - calendar-date-picker-18, Month and year view: The month name opens a list of years to jump to any month between 1980 and 2030. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-18.json` - calendar-date-picker-19, Appointment picker: A day and its free time slots side by side. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-19.json` - calendar-date-picker-20, Calendar with presets: Quick picks beside the calendar, from today to last year. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-20.json` - calendar-date-picker-21, Range with presets: Report ranges beside the calendar, from today to last year. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-21.json` - calendar-date-picker-22, Two months: A range across two months that page together. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-22.json` - calendar-date-picker-23, Three months: A range across three months that page together. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-23.json` - calendar-date-picker-24, Pricing calendar: Two months with a fictional fare under each day, the cheap ones in green. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-24.json` - calendar-date-picker-25, Date picker: A react-aria date field that opens a calendar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-25.json` - calendar-date-picker-26, Date range picker: A react-aria pair of date fields that opens a range calendar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-26.json` - calendar-date-picker-27, Popover date picker: A field-like trigger that opens a calendar in a popover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-27.json` - calendar-date-picker-28, Popover range picker: A field-like trigger that opens a range calendar in a popover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendar-date-picker-28.json` ### Checkbox - checkbox-01, Basic checkbox: A checkbox with its label beside it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-01.json` - checkbox-02, Indeterminate checkbox: A select all box that starts half checked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-02.json` - checkbox-03, Coloured checkbox: A checked box filled with the success hue instead of the primary. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-03.json` - checkbox-04, Disabled checkbox: A checkbox and its label dimmed because they cannot be changed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-04.json` - checkbox-05, Todo item: A task whose label is struck through once it is done. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-05.json` - checkbox-06, Animated todo item: A round success checkbox that draws a line through its task. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-06.json` - checkbox-07, Terms checkbox: An agreement checkbox with a link to the terms in its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-07.json` - checkbox-08, Inline checkbox group: Three checkboxes side by side. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-08.json` - checkbox-09, Stacked checkbox group: Three checkboxes in a column for picking notifications. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-09.json` - checkbox-10, Trailing checkbox: A full-width row with the label first and the box at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-10.json` - checkbox-11, Checkbox with description: A checkbox with a quiet sublabel and a line of help under it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-11.json` - checkbox-12, Checkbox with field: Checking the box opens a field below it and focuses it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-12.json` - checkbox-13, Trailing checkbox with description: A label, a sublabel and a description with the box at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-13.json` - checkbox-14, Checkbox card: A card that you check as a whole and that takes a primary hairline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-14.json` - checkbox-15, Payment card checkbox: A checkbox card for a saved card, led by its brand mark. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-15.json` - checkbox-16, Integration checkbox: A checkbox card for an integration, led by its logo on a key cap. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-16.json` - checkbox-17, Checkbox tiles: A two-column grid of tool tiles that can each be checked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-17.json` - checkbox-18, Checkbox tree: Nested checkboxes where a parent shows when only some children are on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-18.json` - checkbox-19, Weekday picker: Round day chips that fill with the primary when picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-19.json` - checkbox-20, Theme checkbox: A checkbox drawn as an icon button that swaps the sun for the moon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/checkbox-20.json` ### Comment - comment-01, Thread with replies: Comments with replies one level deep, a reply field that opens in place and replies that fold under their count Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-01.json` - comment-02, Mention suggestions: A comment field where @ lists the team, arrows and Enter pick a name and each mention is tinted in the text Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-02.json` - comment-03, Reactions: Reaction chips you toggle with a rolling count and the names in a tooltip, and a picker for a new one Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-03.json` - comment-04, Edit in place: Your comment turns into its own field to edit, marks itself edited, and leaves an Undo line when deleted Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-04.json` - comment-05, Resolved thread: A discussion that folds into one resolved line, opens again to read and can be reopened Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-05.json` - comment-06, Comment with attachments: Files staged as chips while they upload, refused with a reason when too large, and shown as tiles once posted Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-06.json` - comment-07, Unread marker: A count of new comments above the first unread one, cleared with Mark as read Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-07.json` - comment-08, Someone is typing: A typing row under the avatar of the person writing, which becomes their comment when it arrives Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/comment-08.json` ### Dialog - dialog-01, Confirmation dialog: An alert dialog that asks before an invoice goes out. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-01.json` - dialog-02, Destructive confirmation: An alert dialog with an error orb that names what gets deleted. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-02.json` - dialog-03, Scrollable dialog: A long FAQ that scrolls with the native scrollbar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-03.json` - dialog-04, Scrollable dialog with custom scrollbar: The same FAQ inside a scroll area with a thin scrollbar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-04.json` - dialog-05, Dialog with fixed header: The title stays in place while the questions scroll under it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-05.json` - dialog-06, Dialog with fixed footer: The actions stay at the bottom while the questions scroll. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-06.json` - dialog-07, Terms dialog: Terms that can be accepted only once read to the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-07.json` - dialog-08, Typed confirmation: Deleting a project asks for its name before the button turns on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-08.json` - dialog-09, Newsletter dialog: An email field whose button turns into Subscribed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-09.json` - dialog-10, Feedback dialog: A short message with links to help, sent in place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-10.json` - dialog-11, Rating dialog: A scale from 0 to 8 on joined pills, then a reason. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-11.json` - dialog-12, Confirmation code dialog: A 4-digit code that swaps the dialog to its confirmed step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-12.json` - dialog-13, Sign-up dialog: Name, email and password, with Google as the other way in. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-13.json` - dialog-14, Sign-in dialog: Email and password with remember me and a reset link. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-14.json` - dialog-15, Invite dialog: Email rows added one at a time and a link to copy. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-15.json` - dialog-16, Card details dialog: Card number, expiry and CVC that format as you type. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-16.json` - dialog-17, Checkout dialog: A billing period, card fields and a coupon field on demand. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-17.json` - dialog-18, Plan dialog: Plans as choice cards, with what every paid plan includes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-18.json` - dialog-19, Profile dialog: Cover, picture and profile fields between a fixed title and fixed actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-19.json` - dialog-20, Onboarding dialog: Four steps in one dialog that resizes, with an indicator that travels. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-20.json` - dialog-21, Command palette: Commands opened from a search field or with Cmd K. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dialog-21.json` ### Dropdown menu - dropdown-01, Basic menu: A ghost icon button that opens four plain actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-01.json` - dropdown-02, Menu as wide as its trigger: The menu takes at least the width of the button that opens it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-02.json` - dropdown-03, Menu with icons: Each action leads with a muted icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-03.json` - dropdown-04, Grouped menu: Actions in groups split by hairlines, delete last on its own. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-04.json` - dropdown-05, Menu with group labels: Each group of actions opens with a short label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-05.json` - dropdown-06, Checkbox menu: Options that toggle on and off while the menu stays open. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-06.json` - dropdown-07, Radio menu: One option at a time, marked when picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-07.json` - dropdown-08, Menu with shortcuts: Grouped actions with keyboard shortcuts and a submenu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-08.json` - dropdown-09, Menu with submenus: Icons, shortcuts and submenus holding a radio group and checkboxes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-09.json` - dropdown-10, Account menu: Shows who is signed in above the account actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-10.json` - dropdown-11, Account menu with avatar: A header with avatar, name and email over icon actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-11.json` - dropdown-12, Avatar menu: The avatar itself opens the account menu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-12.json` - dropdown-13, Help menu: Links to documentation, support and contact. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-13.json` - dropdown-14, Add block menu: Block types on key cap tiles with a one line description. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-14.json` - dropdown-15, Theme menu: Picks a theme and swaps the icon of its trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dropdown-15.json` ### Event calendar - event-calendar-01, Event calendar: Day, week, month, year and agenda views behind a segmented switch, with events you drag to a new slot and edit in one dialog Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-01.json` - event-calendar-02, Month view: A month of events where spans read as bars and timed events as a dot with their time, and busy days fold into a list Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-02.json` - event-calendar-03, Week view: Seven days on an hour grid that opens on the morning, with all-day events on top and a line at the current time Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-03.json` - event-calendar-04, Day view: One day on an hour grid where overlapping events sit side by side and a click on a free slot plans a new one Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-04.json` - event-calendar-05, Year view: Twelve compact months tinted by how busy each day is, with the picked day listed beside them Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-05.json` - event-calendar-06, Agenda: The next thirty days as a list grouped by day, with the time, title and place of every event Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-06.json` - event-calendar-07, Month with the day’s events: A small month with a dot on busy days beside the events of the picked day, which change in place Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/event-calendar-07.json` ### File upload - file-upload-01, Image upload button: Picks an image, previews it and lets you remove it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-01.json` - file-upload-02, Avatar upload button: A round button that shows the chosen avatar, with a remove badge. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-02.json` - file-upload-03, Avatar drop area: A round dashed slot that takes a dropped or picked image as the avatar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-03.json` - file-upload-04, Image drop zone: A zone you click or drop on that fills with the image, within a size limit. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-04.json` - file-upload-05, Image drop zone with button: A drop zone with a select button that shows the image inside it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-05.json` - file-upload-06, Image grid uploader: Several images in a grid inside the drop zone, each with a remove badge. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-06.json` - file-upload-07, Image list uploader: A drop zone above a list of images with their sizes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-07.json` - file-upload-08, Single file uploader: One file at a time, picked or dropped, shown in a row under the zone. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-08.json` - file-upload-09, File list uploader: Files of any type listed under the zone with an icon for their kind. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-09.json` - file-upload-10, File list in the zone: Uploaded files listed inside the drop zone with remove and add actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-10.json` - file-upload-11, File table uploader: Uploaded files in a table with their type, size and actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-11.json` - file-upload-12, File card grid: Mixed files as cards with a preview or a kind icon, a name and a size. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-12.json` - file-upload-13, Upload with progress: Each added file shows a progress bar until its simulated upload ends. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-13.json` - file-upload-14, Avatar uploader with cropper: Picks an image, opens a dialog to crop and zoom it, then sets it as the avatar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/file-upload-14.json` ### Image cropper - image-cropper-01, Avatar uploader with cropper: Picks an image, opens a dialog to crop and zoom it, then sets it as the avatar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-01.json` - image-cropper-02, Image cropper: Drag the image under the crop area and scroll or pinch to zoom. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-02.json` - image-cropper-03, Wide cropper: A crop area locked to a 16:9 ratio. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-03.json` - image-cropper-04, Brand crop area: The crop area outlined in the brand colour. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-04.json` - image-cropper-05, Light mask cropper: A light mask in the card colour around the crop area. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-05.json` - image-cropper-06, Full size crop area: A square cropper whose crop area fills it with no padding. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-06.json` - image-cropper-07, Round crop area: A circular crop area for avatars. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-07.json` - image-cropper-08, Cropper with zoom slider: A slider and its read-out set the zoom of the image. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-08.json` - image-cropper-09, Zoom limits: Zoom starts at 2x and goes up to 10x. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-09.json` - image-cropper-10, Crop data output: The crop area in pixels, shown as it changes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-10.json` - image-cropper-11, Crop preview: A button crops the selection and shows the result beside it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/image-cropper-11.json` ### Input - input-01, Simple input: An email field with its label above. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-01.json` - input-02, Required input: A field whose label carries a required mark. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-02.json` - input-03, Input with helper text: A field with a short hint under it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-03.json` - input-04, Input with hint: A label with an Optional hint on its right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-04.json` - input-05, Input with brand focus: A field whose border and halo take the brand colour on focus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-05.json` - input-06, Input with error: An invalid field with a message that says how to fix it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-06.json` - input-07, Filled input: A field on a soft grey fill without an outline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-07.json` - input-08, Disabled input: A field and its label dimmed while it cannot be edited. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-08.json` - input-09, Input with start icon: An at sign before a username. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-09.json` - input-10, Input with end icon: A mail icon at the end of an email field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-10.json` - input-11, Input with start inline add-on: The protocol written inside the field before the address. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-11.json` - input-12, Input with end inline add-on: A domain ending written inside the field after the name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-12.json` - input-13, Input with inline add-ons: A price between a currency sign and its code. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-13.json` - input-14, Input with start add-on: The protocol in its own segment, inside the outline of the address. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-14.json` - input-15, Input with end add-on: A domain ending in its own segment after the name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-15.json` - input-16, Input with inline and end add-ons: A price with an inline currency sign and a segment for its code. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-16.json` - input-17, Input with start select: A protocol picked from a native select before the address. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-17.json` - input-18, Input with end select: A domain ending picked from a native select after the name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-18.json` - input-19, Input with inline button: A send button inside the end of a newsletter field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-19.json` - input-20, Input with end icon button: A download button in its own segment after an invoice number. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-20.json` - input-21, Input with end button: A Send invite segment after an email field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-21.json` - input-22, Input with button: An email field next to an outline Subscribe pill. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-22.json` - input-23, Password with show toggle: An eye button reveals or hides the password and swaps its icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-23.json` - input-24, Input with clear button: A clear button that appears with a value and empties the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-24.json` - input-25, Search with shortcut: A search field that shows its keyboard shortcut on a key cap. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-25.json` - input-26, Search with icon and button: A search icon before the query and a submit arrow after it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-26.json` - input-27, Search with loader: The search icon turns into a spinner while results load. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-27.json` - input-28, Number input with steppers: Minus and plus segments around a number. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-28.json` - input-29, Number input with chevrons: A euro amount with stacked up and down steppers. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-29.json` - input-30, File input: A native file picker with its button inside the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-30.json` - input-31, Input with overlapping label: A small label sitting on the top edge of the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-31.json` - input-32, Floating label: A label that moves up to the edge when the field is focused or filled. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-32.json` - input-33, Input with inset label: The label and the value inside one outline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-33.json` - input-34, Input with character limit: A counter at the end of the field that slides as you type. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-34.json` - input-35, Input with characters left: A hint under the field that counts what remains. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-35.json` - input-36, Date input: A date typed segment by segment. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-36.json` - input-37, Time input: A time typed segment by segment. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-37.json` - input-38, Time input with start icon: A clock before the time segments. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-38.json` - input-39, Time input with end icon: A clock after the time segments. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-39.json` - input-40, Date and time input: A date with hours and minutes on a 24 hour clock. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-40.json` - input-41, Date picker: A typed date with a button that opens a calendar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-41.json` - input-42, Date range picker: Start and end dates with a range calendar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-42.json` - input-43, Date range with unavailable days: Weekends and booked days cannot be picked, and a range over them says why. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-43.json` - input-44, Joined code input: Four code slots joined into one control. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-44.json` - input-45, Split code input: Six code slots in two joined groups of three. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-45.json` - input-46, Spaced code input: Four separate code slots. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-46.json` - input-47, Phone number input: A country picker with its flag before an international number. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-47.json` - input-48, Card number input: A card number that formats itself as you type. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-48.json` - input-49, Expiry date input: A card expiry date that formats itself as you type. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-49.json` - input-50, Security code input: A card security code field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-50.json` - input-51, Card details: Number, expiry and code in one outline, with the card brand once it is known. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-51.json` - input-52, Password strength: A meter and a checklist that update as the password grows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-52.json` - input-53, Read-only input: A value on a soft fill that can be selected but not edited. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-53.json` - input-54, Copy to clipboard: A read-only link with a copy button that confirms with a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-54.json` - input-55, Masked input: A license plate field that follows a fixed pattern. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-55.json` - input-56, Timestamp input: Hours, minutes and seconds typed into a mask. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-56.json` - input-57, Range input: Minimum and maximum prices side by side in one outline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-57.json` - input-58, Input with tags: A tag is added on Enter and removed from its chip under the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-58.json` - input-59, Input with inner tags: Tags sit inside the field and Backspace removes the last one. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-59.json` - input-60, Password with morphing reveal: Showing the password turns each dot into its character one after the other, in a monospace face. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-60.json` - input-61, Password with Caps Lock warning: The hint under the field becomes a warning while Caps Lock is on and the field has focus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-61.json` - input-62, Confirm password with match state: The confirmation stays quiet while it follows the password and shows a cross or a check once it differs or matches. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-62.json` - input-63, Segmented strength meter: Four segments fill in turn as the password gets stronger and the strength label slides in the same direction. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-63.json` - input-64, Password rule chips: Each rule is a chip that turns green and swaps its circle for a check once the password meets it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/input-64.json` ### Modal - modal-01, Invite people: Addresses become chips tinted by what sending does to them, with the role of the batch and the pending invitations to resend or revoke Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-01.json` - modal-02, Invite with a seat limit: A seat meter that reserves a seat for each address in the field and flags the ones left without a seat Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-02.json` - modal-03, Invite with a link and a QR code: A link to copy with its expiry and approval, an illustrative QR code and a join code that change together when the link is reset Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-03.json` - modal-04, Invite into a project: Teammates searched and added to the project with an access level, each one changeable or removable in the list Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-04.json` - modal-05, Share a project: Who can open the project as three access levels with a travelling highlight, what the link allows and the link to copy Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-05.json` - modal-06, Manage access: A role on a segmented control sets the permission switches, and changing one marks the access as custom with a way back Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-06.json` - modal-07, Workspace access: A join code to copy or renew, allowed e-mail domains added in a dashed slot and the role of people who join Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-07.json` - modal-08, Add members from the directory: Workspace people outside the team, picked with checkboxes into an avatar stack and added in one go Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-08.json` - modal-09, Give feedback: A kind, a five-step scale, a follow-up question that follows the rating, a screenshot slot and a thank-you state Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-09.json` - modal-10, Schedule a meeting: Attendees as chips, the next free slots, a duration and a meeting link, summed up in one sentence that rewrites itself Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-10.json` - modal-11, Search people: An @ mention search over members, pending invitations and guests, with highlighted matches and arrow-key picking Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-11.json` - modal-12, Recent searches: A search with scoped filter pills and a history of recent searches you prune one by one or all at once Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-12.json` - modal-13, Delete a workspace: The workspace and what deleting it does come first, then its name typed to confirm and a restore offer once deleted Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-13.json` - modal-14, Payment record: Time entries with their total, the earnings breakdown with the take-home figure, an invoice export and a paid status Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/modal-14.json` ### Navbar - navbar-01, Simple navbar: A logo, four links with a highlight that travels to the current one, and two actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-01.json` - navbar-02, Navbar with menus: Links that open panels; one panel slides and resizes between Features, Pricing and About. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-02.json` - navbar-03, Navbar with underline: The current link is marked by an underline that travels along the bottom edge. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-03.json` - navbar-04, Store navbar: Shop links, a search button that grows into a field, and a cart with its count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-04.json` - navbar-05, Navbar with account: Links on the left, help, notifications and the account menu on the right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-05.json` - navbar-06, Icon navbar: Icon links with tooltips, a theme toggle, a language select and the account menu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-06.json` - navbar-07, Breadcrumb navbar: The logo leads a breadcrumb that ends in a project select; parents fold away on small screens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-07.json` - navbar-08, Two-row navbar: A centred search with its shortcut on the first row and the links on the second. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-08.json` - navbar-09, Messaging navbar: A search button that opens into a field, centred icon links, messages and notifications. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-09.json` - navbar-10, Navbar with voice search: A centred search field with a microphone button, two actions and a theme toggle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-10.json` - navbar-11, Navbar with icon links: Centred links with icons and a search button on the right that grows into a field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-11.json` - navbar-12, Centred logo navbar: Links on the left, the logo in the middle, the account and an upgrade action. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-12.json` - navbar-13, Workspace navbar: Account and project selects as a breadcrumb, documentation links and settings. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-13.json` - navbar-14, Team navbar: A team switcher, centred icon links and a primary action to write a post. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-14.json` - navbar-15, Chat navbar: A model select whose label morphs to the chosen model, a temporary chat button and the account. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-15.json` - navbar-16, Dashboard navbar: A search field, a test mode switch, tool menus and a button to create an item. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-16.json` - navbar-17, Report navbar: A breadcrumb with a date range picker, filters and saved reports. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-17.json` - navbar-18, Editor navbar: A team switcher, a segmented view toggle, and export and upgrade actions. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-18.json` - navbar-19, Document navbar: A back link and title, document tools and the collaborators with their presence. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-19.json` - navbar-20, Server navbar: Section links with a travelling underline, status badges and a power switch. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/navbar-20.json` ### Notification - notification-01, Warning notice: A one-line notice with a warning orb. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-01.json` - notification-02, Error notice: A one-line notice for something that failed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-02.json` - notification-03, Success notice: A one-line notice that confirms a save. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-03.json` - notification-04, Info notice: A one-line notice about a change ahead. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-04.json` - notification-05, Warning notice with link: The warning notice with a link to fix it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-05.json` - notification-06, Error notice with link: The error notice with a link to the reason. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-06.json` - notification-07, Success notice with link: The success notice with a link to the result. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-07.json` - notification-08, Info notice with link: The info notice with a link to read more. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-08.json` - notification-09, Notice with undo: A success notice with an Undo button. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-09.json` - notification-10, Notice with text actions: A sent message with View and Undo as links. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-10.json` - notification-11, Warning notice with action: A title, the reason and the action that resolves it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-11.json` - notification-12, Error notice with action: A failed payment with the action that fixes it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-12.json` - notification-13, Success notice with action: A finished export with its download. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-13.json` - notification-14, Info notice with action: Planned maintenance with a link to the status page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-14.json` - notification-15, Cookie notice: A consent notice where declining is as easy as accepting. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-15.json` - notification-16, Update notice: A new version to install now or later. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-16.json` - notification-17, Invitation notice: Who invited you to what, with Accept or Decline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-17.json` - notification-18, Event notice: An upcoming live event with a reminder button. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-18.json` - notification-19, Error toast with retry: A failed send whose retry turns the toast into loading, then success. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-19.json` - notification-20, Toast with timer: A custom toast that closes after 5 seconds and pauses while hovered. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-20.json` - notification-21, Toast with undo: A toast with a description and an Undo action. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-21.json` - notification-22, Custom toast: A sent message in a custom toast with View and Undo. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-22.json` - notification-23, Inbox with unread states: An inbox where opening a row reads it, the dot shrinks away and Mark all as read clears the count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-23.json` - notification-24, Activity grouped by day: Notifications under Today, Yesterday and Earlier, each one snoozed or muted in place, with snoozed ones brought back from the header. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-24.json` - notification-25, Bell with filtered inbox: A bell that opens the inbox, with All, Mentions and Invites tabs that carry their unread counts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-25.json` - notification-26, Invitation with its answer: A team invitation whose Accept and Decline turn into the result, with Undo. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-26.json` - notification-27, Task activity thread: The latest change on a task under its chip, with the earlier updates folded below. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-27.json` - notification-28, Stack of notifications: Toasts stacked one behind the other that spread out on hover, focus or a pinned toggle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-28.json` - notification-29, Notices in their tone: Success, error and info notices washed in their own hue, each dismissed with its space closing. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-29.json` - notification-30, Notification preferences: One switch per kind of notification, saved as it changes, with the kind dimmed when it is off. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notification-30.json` ### Pagination - pagination-01, Previous and next: Two ghost pills at both ends that step through the pages. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-01.json` - pagination-02, Previous and next with arrows: Ghost pills whose arrow leans towards the page they open. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-02.json` - pagination-03, Page count between arrows: The current page and the total sit between two arrows at both ends. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-03.json` - pagination-04, Compact page count: The page count and its two arrows grouped in the centre. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-04.json` - pagination-05, Page count with text links: The page count on the left, Previous and Next on the right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-05.json` - pagination-06, Numbered pages: Page numbers with ellipses and an outline pill that travels to the current page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-06.json` - pagination-07, Numbered pages with first and last: Page numbers framed by jumps to the first and last page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-07.json` - pagination-08, Grouped pages: Page numbers joined into one segmented control; a flat fill travels to the current page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-08.json` - pagination-09, Pages with results per page: The page count, the page numbers and a select for the page size. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-09.json` - pagination-10, Table footer: Rows per page, the visible row range and arrows to the first and last page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-10.json` - pagination-11, Page select: A select of every page between the arrows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-11.json` - pagination-12, Go to page: Page numbers next to a field that jumps to a typed page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pagination-12.json` ### Popover - popover-01, Filter popover: Checkboxes to pick widgets, with clear and apply. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-01.json` - popover-02, Notifications popover: A bell with an unread count and a list that marks items as read. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-02.json` - popover-03, Notifications with avatars: The notification list with an avatar for each person. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-03.json` - popover-04, Hint popover: A compact explanation with one action, too rich for a tooltip. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-04.json` - popover-05, Tips popover: Short tips read one after another, then start over. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-05.json` - popover-06, Tips with navigation: Tips with previous and next buttons and a step count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-06.json` - popover-07, Share popover: Share buttons and a link to copy in one click. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-07.json` - popover-08, Feedback popover: A short form that confirms when the message is sent. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-08.json` - popover-09, Guided tour: A popover that moves from one spot to the next with its arrow. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/popover-09.json` ### Radio - radio-01, Basic radio group: Three options stacked, one of them always picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-01.json` - radio-02, Coloured radio group: A radio group whose picked option takes the info hue. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-02.json` - radio-03, Disabled radio group: A radio group and its labels dimmed because they cannot be changed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-03.json` - radio-04, Radio group with descriptions: Each option has a quiet sublabel and a line of help. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-04.json` - radio-05, Radio with field: Picking the first option opens a field below it and focuses it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-05.json` - radio-06, Review filter: Filter reviews by star rating, each option with its count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-06.json` - radio-07, Colour swatches: Round swatches in the theme hues for picking a label colour. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-07.json` - radio-08, Radio cards: Two plan cards where the picked one takes a primary hairline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-08.json` - radio-09, Payment card picker: Radio cards for saved cards, each led by its brand mark. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-09.json` - radio-10, Provider picker: Radio cards for database providers, each led by its logo on a key cap. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-10.json` - radio-11, Radio tiles: A two-column grid of tool tiles where one is picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-11.json` - radio-12, Payment method tiles: Three centred tiles with an icon and a name for the payment method. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-12.json` - radio-13, Option tiles: A grid of CPU sizes where the largest one is not available. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-13.json` - radio-14, Radio chips: Small cards in a row for picking a server location. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-14.json` - radio-15, Plan list: Joined plan rows with prices and a popular badge. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-15.json` - radio-16, Star rating: Five stars that light up under the pointer and keep the chosen rating. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-16.json` - radio-17, Mood picker: Five round faces, from angry to laughing. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-17.json` - radio-18, Score scale: A joined scale from 0 to 5 with its two ends named below. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-18.json` - radio-19, Theme picker: Small sketches of the light, dark and system themes to pick from. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-19.json` - radio-20, Billing period toggle: Monthly or yearly, with an indicator that slides to the choice. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/radio-20.json` ### Select - select-01, Native select: A browser select on the field recipe, with a label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-01.json` - select-02, Native select with placeholder: A disabled first option asks for a choice until one is made. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-02.json` - select-03, Native select with icon: A clock icon sits at the start of the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-03.json` - select-04, Native select with hint: A line of help under the field, linked to it for screen readers. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-04.json` - select-05, Native select with brand outline: The hairline and the focus halo take the brand colour. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-05.json` - select-06, Native select with error: An invalid field with the message that says how to fix it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-06.json` - select-07, Filled native select: A grey fill without a hairline, for dense forms. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-07.json` - select-08, Disabled native select: A field and its label dimmed while the choice is locked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-08.json` - select-09, Required native select: An asterisk after the label marks a field the form needs. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-09.json` - select-10, Auto-width native select: The field is as wide as its longest option. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-10.json` - select-11, Native select with groups: Options gathered under frontend and backend headings. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-11.json` - select-12, Native time zone select: Every time zone of the browser, sorted by its offset from GMT. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-12.json` - select-13, Native select with floating label: The label sits on the top edge of the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-13.json` - select-14, Native select with inset label: The label lives inside the field, above the value. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-14.json` - select-15, Select: A custom select with a value picked by default. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-15.json` - select-16, Select with placeholder: A dimmed prompt shows until an option is picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-16.json` - select-17, Select with icon: A clock icon before the value in the trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-17.json` - select-18, Select with hint: A line of help under the trigger, read with the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-18.json` - select-19, Select with brand outline: The hairline, the open state and the focus halo take the brand colour. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-19.json` - select-20, Select with error: An invalid field with the message that says how to fix it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-20.json` - select-21, Filled select: A grey fill without a hairline, for dense forms. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-21.json` - select-22, Disabled select: A trigger and its label dimmed while the choice is locked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-22.json` - select-23, Required select: An asterisk after the label marks a field the form needs. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-23.json` - select-24, Auto-width select: The trigger fits its value, with a minimum width. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-24.json` - select-25, Select with groups: Options gathered under frontend and backend headings. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-25.json` - select-26, Select with separator: A hairline divides the groups of options. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-26.json` - select-27, Select with disabled options: Some options are shown but cannot be picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-27.json` - select-28, Select with floating label: The label sits on the top edge of the trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-28.json` - select-29, Select with inset label: The label lives inside the field, above the value. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-29.json` - select-30, Time zone select: Every time zone of the browser, sorted by its offset from GMT. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-30.json` - select-31, Select with end mark: The picked row ends with the selected mark. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-31.json` - select-32, Status select: Each status carries a coloured dot, in the list and in the trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-32.json` - select-33, Select with prefix: A muted prefix names the setting before its value. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-33.json` - select-34, Select with icons: Each framework shows its mark, in the list and in the trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-34.json` - select-35, Select with icons and end mark: Framework marks at the start of the rows, the selected mark at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-35.json` - select-36, Select with descriptions: Each plan has a line of detail in the list; the trigger keeps the name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-36.json` - select-37, Country select: Countries grouped by continent, each with its two-letter code. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-37.json` - select-38, Select with avatars: Team members with their avatar, in the list and in the trigger. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-38.json` - select-39, Select with initials: Members without a photo get a coloured plate with their initial. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-39.json` - select-40, Select with portraits: Two-line rows with an avatar, a name and a handle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-40.json` - select-41, Searchable select: A search field at the top of the list narrows the options. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-41.json` - select-42, Organization switcher: A searchable list of organizations with an action to add one. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-42.json` - select-43, Searchable time zone select: Every time zone of the browser, found by typing part of its name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-43.json` - select-44, Searchable country select: Countries grouped by continent, narrowed by a search field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-44.json` - select-45, Searchable select with counts: Service categories with an icon and a count on each row. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-45.json` - select-46, Multiselect: Picked options become removable chips in the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-46.json` - select-47, Multiselect with clear: Chips in the field and one button that removes them all. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-47.json` - select-48, Native multiple select: A browser list where several options can be picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-48.json` - select-49, Listbox: An always open list where one option is picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-49.json` - select-50, Multiple listbox: An always open list where several options are picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-50.json` - select-51, Listbox with groups: An always open list of options under headings and hairlines. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/select-51.json` ### Slider - slider-01, Basic slider: One thumb on a thin track, with a label above. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-01.json` - slider-02, Disabled slider: A dimmed slider and label that cannot be moved. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-02.json` - slider-03, Slider with square thumb: A slider that steps by ten with a softly squared thumb. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-03.json` - slider-04, Slider with solid thumb: A thumb filled with the brand colour of the track. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-04.json` - slider-05, Slider with narrow thumb: A tall, narrow brand thumb carved out of the surface. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-05.json` - slider-06, Slider with reference labels: A storage limit with its minimum, middle and maximum below. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-06.json` - slider-07, Slider with ticks: A tick for every month and a number on every other one. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-07.json` - slider-08, Slider with value: The value beside the label, rolling when it steps. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-08.json` - slider-09, Slider with end labels: Low and high written above the two ends of the track. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-09.json` - slider-10, Slider with value bubble: End labels and a bubble that shows the value while dragging. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-10.json` - slider-11, Range slider: Two thumbs that pick a minimum and a maximum. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-11.json` - slider-12, Range slider with values: A range whose two ends are written beside the label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-12.json` - slider-13, Volume slider: A volume track between a muted and a loud speaker. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-13.json` - slider-14, Slider with three thumbs: Gradient stops with a percentage bubble on each thumb. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-14.json` - slider-15, Slider with reset: A temperature field and slider with a reset that appears once changed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-15.json` - slider-16, Slider with input: A slider and a number field that follow each other. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-16.json` - slider-17, Rating slider: Five steps between two faces, with the rating in words. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-17.json` - slider-18, Rating slider with face: A rating whose face changes and whose bubble names the step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-18.json` - slider-19, Range slider with inputs: A distance range with a number field at each end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-19.json` - slider-20, Slider with steppers: Monthly credits set by dragging or by minus and plus buttons. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-20.json` - slider-21, Price range with apply: A price range written in the label, applied with a button. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-21.json` - slider-22, Vertical slider: One thumb on an upright track. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-22.json` - slider-23, Vertical slider with input: An upright level with a number field below it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-23.json` - slider-24, Vertical range slider: An upright range with a value bubble beside each thumb. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-24.json` - slider-25, Position sliders: X, Y and Z offsets with number fields and one reset. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-25.json` - slider-26, Price slider with histogram: A price range over a histogram of items, with fields and a result count. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-26.json` - slider-27, Equalizer: Five upright bands that show their gain while dragging. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/slider-27.json` ### Stepper - stepper-01, Numbered stepper: Four numbered steps joined by a line that fills as you move on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-01.json` - stepper-02, Stepper with checks: A finished step swaps its number for a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-02.json` - stepper-03, Compact stepper: Small dots, a ring on the current step and a check on done ones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-03.json` - stepper-04, Controlled stepper: Previous and next buttons move through the steps. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-04.json` - stepper-05, Stepper with loading: The current step shows a spinner while the next one is saved. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-05.json` - stepper-06, Mixed stepper: Steps that hold an avatar, a spinner and an icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-06.json` - stepper-07, Labelled bars: Bars with a title under each, clickable to jump to a step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-07.json` - stepper-08, Paginated stepper: Progress bars between two arrow buttons. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-08.json` - stepper-09, Progress stepper: A segmented bar that fills, with the step count under it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-09.json` - stepper-10, Stepper with descriptions: A title and a description centred under each step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-10.json` - stepper-11, Inline titles: Titles beside each step, stacked under it when space runs out. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-11.json` - stepper-12, Inline titles and descriptions: A title and a description beside each step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-12.json` - stepper-13, Titles before steps: The title and description sit before each step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-13.json` - stepper-14, Vertical stepper: Numbered steps stacked down a vertical line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-14.json` - stepper-15, Controlled vertical stepper: A vertical stepper moved with previous and next buttons. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-15.json` - stepper-16, Vertical stepper with titles: A title beside each step of a vertical stepper. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-16.json` - stepper-17, Vertical stepper with descriptions: A title and a description beside each vertical step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/stepper-17.json` ### Sub-task - subtask-01, Checklist with progress ring: Sub-tasks you check off, a strike that runs across the title and a ring that fills, then turns into a check Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-01.json` - subtask-02, Inline add: A dashed add line where Enter adds the sub-task and keeps the cursor for the next one, and rows that fold away on remove Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-02.json` - subtask-03, Reorder by drag: Rows that move by their handle, by its arrow keys or by the up and down buttons, with the new position announced Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-03.json` - subtask-04, Status and assignees: Each sub-task with a status menu and an assignee menu, over a bar with one segment per sub-task in its status colour Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-04.json` - subtask-05, Nested sub-tasks: Phases that fold over their steps, with a parent box that checks every step and shows when only some are done Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-05.json` - subtask-06, Collapsed summary: A one-line "4 of 7 done" with a segment per sub-task that opens into the checklist Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-06.json` - subtask-07, Convert a note line: A note line that travels into the sub-task list and takes a task number when you convert it Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/subtask-07.json` ### Switch - switch-01, Basic switch: A switch named for screen readers only. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-01.json` - switch-02, Small switch: A smaller track and thumb for dense rows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-02.json` - switch-03, Coloured switch: A switch that turns the success hue when it is on. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-03.json` - switch-04, Disabled switch: A dimmed switch that cannot be changed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-04.json` - switch-05, Square switch: A switch with a rounded square track and thumb. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-05.json` - switch-06, Thin track switch: A large thumb riding over a thin track, in the Material 2 manner. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-06.json` - switch-07, Outlined track switch: A small grey thumb that grows and turns white as the track fills, in the Material 3 manner. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-07.json` - switch-08, Switch with state label: A switch whose On and Off label swaps as it changes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-08.json` - switch-09, Switch between labels: Off and On on each side, the current one in full ink. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-09.json` - switch-10, Switch with icon: A dark mode switch whose icon swaps the sun for the moon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-10.json` - switch-11, Switch between icons: A sun and a moon on each side of a dark mode switch. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-11.json` - switch-12, Segmented switch: A wide track whose raised half slides under the chosen icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-12.json` - switch-13, Wide icon switch: A wide switch that shows the current mode on the free half. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-13.json` - switch-14, Wide labelled switch: A wide rounded square switch that reads On or Off on the free half. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-14.json` - switch-15, Switch card: A setting card that you switch as a whole and that takes a primary hairline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-15.json` - switch-16, Payment card switch: A switch card for a saved card, led by its brand mark. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-16.json` - switch-17, Integration switch: A switch card for an integration, led by its logo on a key cap. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/switch-17.json` ### Table - table-01, Basic table: Accounts with a status and a balance total in the footer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-01.json` - table-02, Table with avatars: Each person shows an avatar, a name and a handle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-02.json` - table-03, Table without row lines: Rows separated by space, with a rounded hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-03.json` - table-04, Striped table: Every other row is tinted instead of lined. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-04.json` - table-05, Table with column lines: Hairlines between the columns as well as the rows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-05.json` - table-06, Dense table: Eight columns of service data in compact rows on a card. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-06.json` - table-07, Selectable rows: Checkboxes select rows one by one or all at once. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-07.json` - table-08, Card table: A table with selectable rows on a card surface. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-08.json` - table-09, Vertical table: Field names on the left and one record's values on the right. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-09.json` - table-10, Sticky header table: The header stays in place while the rows scroll under it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-10.json` - table-11, Availability matrix: Grouped platform columns with a mark and a version for each feature. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-11.json` - table-12, Basic data table: A TanStack table with row selection and a balance total. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-12.json` - table-13, Filterable data table: Search, select and range filters above a sortable table. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-13.json` - table-14, Resizable columns: Drag a column edge to resize it and click a header to sort. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-14.json` - table-15, Pinnable columns: Stick a column to the left or right edge while the rest scrolls. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-15.json` - table-16, Reorderable columns: Drag a column by its handle to move it, and sort from its header. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-16.json` - table-17, Expandable rows: Rows that carry a note open below to show it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-17.json` - table-18, Paginated table: Rows per page, the visible range and buttons from first to last page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-18.json` - table-19, Numbered pagination: Page numbers with a pill that travels to the current page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-19.json` - table-20, Complete data table: Filters, column toggles, row actions, bulk delete and pagination together. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/table-20.json` ### Tabs - tabs-01, Segmented tabs: A raised plate slides to the active tab on a grey track. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-01.json` - tabs-02, Ghost tabs: A soft tint slides to the active tab, with no track behind. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-02.json` - tabs-03, Pill tabs: A primary pill slides under the active tab. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-03.json` - tabs-04, Underline tabs: A primary line slides under the active tab along a hairline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-04.json` - tabs-05, Underline tabs with hover: Tabs that tint on hover above a sliding primary line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-05.json` - tabs-06, Grouped tabs: Tabs joined into one outlined pill, the active segment tinted. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-06.json` - tabs-07, Folder tabs: The active tab opens onto the content below its baseline. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-07.json` - tabs-08, Segmented tabs with icons and badges: Icons, a count and a New badge that dim on inactive tabs. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-08.json` - tabs-09, Pill tabs with icons: A primary pill slides between tabs that carry an icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-09.json` - tabs-10, Grouped tabs with icons: An outlined pill of tabs with icons, the active segment tinted. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-10.json` - tabs-11, Folder tabs with icons: Folder tabs with an icon before each label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-11.json` - tabs-12, Scrolling underline tabs: Six tabs with icons, a count and a badge that scroll sideways when space runs out. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-12.json` - tabs-13, Stacked underline tabs: An icon above each label and a primary line under the active tab. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-13.json` - tabs-14, Tabs with counts: A count above each label, dimmed until its tab is active. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-14.json` - tabs-15, Icon tabs with tooltips: Icon-only segmented tabs that name themselves in a tooltip. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-15.json` - tabs-16, Vertical icon tabs with tooltips: A column of icon tabs with tooltips on the side, next to a content card. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-16.json` - tabs-17, Vertical segmented tabs: A segmented column of tabs next to a content card. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-17.json` - tabs-18, Vertical underline tabs: A primary line slides along the start edge of a tab column. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-18.json` - tabs-19, Vertical tabs with icons: Icon rows that tint on hover, marked by a sliding primary line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-19.json` - tabs-20, Vertical ghost tabs: A soft tint slides down a column of tabs. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tabs-20.json` ### Teams - teams-01, Team card: A team with its member stack, open tasks and time this week, where Join turns into Joined and your face joins the stack. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-01.json` - teams-02, Team switcher: A pill with the current team that opens every team with its tile and member count, the picked one marked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-02.json` - teams-03, Member row: One member with presence on the avatar, the current task and time today, a role menu, and removal that turns into Undo. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-03.json` - teams-04, Members with roles: The members of a team with a role menu on each row, a last manager who cannot step down, and a pending invite to revoke. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-04.json` - teams-05, Empty team that invites: A team with dashed seats that fill with each address invited, the Invite button going through Sending to Sent. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-05.json` - teams-06, Team settings: Name, colour, visibility, join requests and a hold to archive, with the team tile following every change. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-06.json` - teams-07, Member card that flips: A member card whose Details button turns it over to the email, local time, teams and hours of the week. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-07.json` - teams-08, Workload per member: Planned hours against capacity for each member, this week or next, with the people over capacity in warning. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-08.json` - teams-09, Team picker with search: A searchable list of teams for moving a task, where the mark travels to the team picked and an empty search offers a way back. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/teams-09.json` ### Textarea - textarea-01, Basic textarea: A labelled field that grows with its text. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-01.json` - textarea-02, Required textarea: A required field marked with an asterisk after its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-02.json` - textarea-03, Textarea with hint: A field with a short hint below, read out with the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-03.json` - textarea-04, Optional textarea: A field that says it is optional beside its label. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-04.json` - textarea-05, Textarea with brand focus: A field whose border and halo take the brand colour on focus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-05.json` - textarea-06, Textarea with error: An invalid field with the message that explains the fix. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-06.json` - textarea-07, Filled textarea: A tinted field without an outline until it takes focus. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-07.json` - textarea-08, Compact textarea: A field that starts at two lines before it grows. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-08.json` - textarea-09, Disabled textarea: A dimmed field and label that cannot be edited. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-09.json` - textarea-10, Textarea with button: A field with its send button aligned to the start. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-10.json` - textarea-11, Textarea with end button: A field with its send button aligned to the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-11.json` - textarea-12, Textarea with full-width button: A field with a send button as wide as the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-12.json` - textarea-13, Textarea with overlapping label: A small label that sits on the top edge of the field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-13.json` - textarea-14, Textarea with floating label: A label that rises to the top edge on focus or once filled. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-14.json` - textarea-15, Textarea with inset label: A label drawn inside the field, above the text. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-15.json` - textarea-16, Textarea with character limit: A counter of characters left that warns near the limit and turns red at it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-16.json` - textarea-17, Fixed-height textarea: A field that keeps its height and scrolls instead of growing. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-17.json` - textarea-18, Read-only textarea: A flat, tinted field whose text can be read and copied. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-18.json` - textarea-19, Auto-growing textarea: A field that starts at one line and grows up to five. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/textarea-19.json` ### Timeline - timeline-01, Milestone timeline: Milestone titles on a vertical line, the first three done. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-01.json` - timeline-02, Dates on the side: Dates move to a column on the left when there is room. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-02.json` - timeline-03, Timeline with dates: A date above each title and description. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-03.json` - timeline-04, Pull request timeline: Review steps with the time under each description. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-04.json` - timeline-05, Checked timeline: Done milestones carry a check in a filled circle. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-05.json` - timeline-06, Timeline with icons: Each event has its own icon, filled once it is done. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-06.json` - timeline-07, Comment timeline: Avatars on the line and each comment in a card. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-07.json` - timeline-08, Alternating timeline: Milestones on both sides of a centred line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-08.json` - timeline-09, Event log: System events with their date and time in one card. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-09.json` - timeline-10, Activity feed: Who did what and how long ago, with an icon per action. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-10.json` - timeline-11, Horizontal timeline: Milestones along a horizontal line. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-11.json` - timeline-12, Horizontal timeline, dates above: Dates above the line, titles and descriptions below it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/timeline-12.json` ### Tooltip - tooltip-01, Basic tooltip: A short hint that says what the button does not show. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-01.json` - tooltip-02, Dark tooltip: A tooltip that stays dark in both themes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-02.json` - tooltip-03, Tooltip on a disabled button: Explains why the button cannot be pressed yet. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-03.json` - tooltip-04, Hover card with a title: A term in a sentence that opens its definition on hover. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-04.json` - tooltip-05, Hover card with an icon: A link that previews a short notice led by an icon. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-05.json` - tooltip-06, Hover card with a cover: A changelog link that previews a cover, a title and a summary. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-06.json` - tooltip-07, Tooltips on four sides: Four pan buttons share one tooltip that moves to each side with its shortcut. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-07.json` - tooltip-08, Hover card with stats: A deployment link that previews its status and figures. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-08.json` - tooltip-09, Chart readout: One readout follows the pointer, a tap or the keyboard from bar to bar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-09.json` - tooltip-10, Profile hover card: An avatar link that previews the profile behind it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-10.json` - tooltip-11, Person hover card: A name that previews the bio and mutual friends. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-11.json` - tooltip-12, Article hover card: A cover link that previews the article with an arrow. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tooltip-12.json` ### Tree - tree-01, Basic tree: Teams in folders that open with the arrow keys or a click. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-01.json` - tree-02, Tree with guide lines: Vertical lines show which folder each row belongs to. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-02.json` - tree-03, Tree with icons: Folder and file icons, the folder opening with its row. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-03.json` - tree-04, Chevron on the right: Icons lead each row and the chevron sits at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-04.json` - tree-05, Drag and drop tree: Select several rows and drag them to a new place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-05.json` - tree-06, Renamable tree: Press F2 to rename the focused row; it moves to its new place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-06.json` - tree-07, Searchable tree: Typing opens every folder and highlights the matches. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-07.json` - tree-08, Filterable tree: Only the matches and their folders stay in the tree. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-08.json` - tree-09, Double-click to open: A click selects a row and a double click opens its folder. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-09.json` - tree-10, Expand and collapse all: Two buttons open or close every folder, with child counts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-10.json` - tree-11, File explorer: Project files by type, sorted again after a drop. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-11.json` - tree-12, Navigation tree: Documentation links with the current page open and marked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-12.json` - tree-13, Checkboxes on the right: A checkbox at the end of each row, folders following their items. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-13.json` - tree-14, Checkboxes on the left: A checkbox before each row, folders following their items. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-14.json` - tree-15, Checkable folders: Checking a folder checks it and everything inside it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/tree-15.json` ## Blocks ### App shells - app-shells-01, Sidebar and inset panel: A workspace sidebar on the window colour with search, quick create and an account menu, and every page in one rounded panel beside it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/app-shells-01.json` - app-shells-02, Icon rail sidebar: The same shell with the sidebar folded into an icon rail that explains itself with tooltips and morphs back to full width. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/app-shells-02.json` - app-shells-03, Settings mode: The sidebar switches to a settings rail with a way back to the app, beside a settings page of rows that save as you change them. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/app-shells-03.json` ### Auth - auth-01, Sign in with a one-time code: An email, then a six-digit code, then signed in: the card resizes between steps, the button turns into its working state and a wrong code says what to do next. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/auth-01.json` - auth-02, Sign up with live password rules: Name, email and password with rules that tick as they are met, a reveal button that swaps its eye, and errors that fold away once you type again. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/auth-02.json` - auth-03, Reset password: Ask for a link, check your email with a resend countdown, choose a new password typed twice, then a confirmation, all in one card that resizes to each step. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/auth-03.json` ### Automations - automations-01, Rule builder: An event, conditions and actions on one rail: rows open and close in place, the rule reads back as a sentence as you edit, mistakes fold in under their row and Save becomes Saving then Saved. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/automations-01.json` ### Billing - billing-01, Usage with a spending cap: Plan meters that turn amber near their limit, on-demand spending against a cap whose marker follows the slider, a card that grows into its editor, and a next invoice that rolls to its new total once the cap is saved. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/billing-01.json` ### Boards - boards-01, Kanban board: Tinted lanes that scroll on their own, cards with property chips, issue types and worked time, dragged between lanes with the keyboard or the pointer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/boards-01.json` - boards-02, Board with hidden columns and filters: The same board with folded lanes gathered at the end, still taking drops, and filters that float one pill with the hidden count and Clear filters. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/boards-02.json` ### Calendars - calendars-01, Calendar app: A sidebar with a month that moves the main calendar and colour toggles that filter it, beside a calendar with day, week, month, year and agenda views Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/calendars-01.json` ### Changelog - changelog-01, Release list with Load more: Dated releases with their kind of change as chips, a summary and a short list, and a Load more that adds the next releases while it is still needed. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/changelog-01.json` ### Chat - chat-01, Conversation about a page: A writing assistant beside a docs page: the reply streams in word by word, Send becomes Stop while it does, and the list follows new text until you scroll up. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-01.json` - chat-02, Prompt composer: A composer that grows with the text, takes files from the picker or a drop, lets you pick a model and fills itself from suggested prompts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-02.json` - chat-03, Reasoning and tool calls: A reply that shows how long it thought, folds its reasoning, runs two tool calls from running to done and cites its sources. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/chat-03.json` ### Contact - contact-01, Contact form with validation: Contact details beside a form that checks each field on submit and as you fix it, shows a sending state and morphs into a confirmation. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/contact-01.json` ### Ctas - ctas-01, Call to action band: One lifted band with a title, a short line and a single primary action, stacked on phones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/ctas-01.json` - ctas-02, Install command card: A card with a package manager switch, the matching install command and a copy button whose icon swaps to a check. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/ctas-02.json` ### Dashboards - dashboards-01, Overview with a figures band: Four figures that pick what one line chart draws, a period switch whose figures roll to their new value, and a CSV export built in the browser. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dashboards-01.json` - dashboards-02, Weekly report: Hours by day as rounded bars that move to the new week, days ahead as empty slots, and the projects ranked by share with rows that travel to their new place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dashboards-02.json` - dashboards-03, Project health: A sprint goal measured against where the team should be by today, and a short table of workstreams with their health and a filter for the ones that need attention. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dashboards-03.json` - dashboards-04, Retention cohorts: Weekly sign-up cohorts as a grid shaded by how many still subscribe, weeks to come as empty slots, a selection ring that travels with the arrow keys and a panel whose figure rolls to the picked week. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/dashboards-04.json` ### Empty states - empty-states-01, Empty list with one action: A project list with nothing in it yet: one sentence on what is missing and the action that adds the first project, which then takes the place of the empty slot. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/empty-states-01.json` - empty-states-02, Search with no results: A people list whose search and role filter match nobody, saying what is applied and how to get everyone back with Clear filters. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/empty-states-02.json` - empty-states-03, Block that failed to load: A page of cards where one block failed (simulated) and shows a notice with Retry, while the other cards keep working. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/empty-states-03.json` ### Faqs - faqs-01, Grouped questions beside the title: The title, topic links and a support action on the left, questions grouped by topic on the right, each answer opening with the panel height transition. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/faqs-01.json` - faqs-02, Centered questions with a contact line: A centred heading, the questions on one card and a line that names who answers the rest. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/faqs-02.json` ### Features - features-01, Alternating feature rows: Three rows that swap sides on wide screens, each pairing a short text with an invoice, a reminder list or a payment list drawn from primitives. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/features-01.json` - features-02, Six small features: A split heading above six short items, each led by a key cap icon tile, two of them with their shortcut. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/features-02.json` - features-03, Feature list with a live preview: Four views in a list whose indicator travels to the picked one, beside a preview that resizes and crossfades to show it. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/features-03.json` ### Filters - filters-01, Amount filter over a histogram: A popover that draws how the invoices spread by amount, lights the bars inside the range as the handles move, glides them to a common range and counts the matches before the list applies them. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/filters-01.json` ### Footers - footers-01, Footer with categories and a newsletter: Four lists of links beside the brand and a newsletter field that checks the address, shows its submitting state and morphs into a confirmation. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/footers-01.json` - footers-02, Compact footer: The mark and the copyright, one row of links and the social links, centred and stacked on phones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/footers-02.json` - footers-03, Footer with a wordmark: Three lists of links beside the brand and a contact address, a back to top button whose arrow travels on hover, and the product name set across the full width at the bottom. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/footers-03.json` - footers-04, Footer with a folding sitemap: Five link columns that fold into an accordion on phones, a support address with a copy button that confirms with a check, and a language select. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/footers-04.json` - footers-05, Footer with a closing call to action: A last headline with a primary action whose arrow travels on hover, then the brand, one row of links and a link to the status page. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/footers-05.json` ### Headers - headers-01, Navbar with a sliding menu panel: A marketing navbar whose menu panel resizes and slides between Product, Solutions and Resources, with an expanding menu on phones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/headers-01.json` - headers-02, Minimal floating navbar: A rounded bar with four links under a highlight that follows the pointer, and a sheet that holds the links on phones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/headers-02.json` ### Heroes - heroes-01, Split hero: The title on the left, a short paragraph and two actions on the right, under an announcement link. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/heroes-01.json` - heroes-02, Centered hero with a live board: A centred title above a planning board drawn from primitives, where one card keeps travelling across the lanes and a rule reacts when it lands in Done. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/heroes-02.json` - heroes-03, Hero with an email capture: A waitlist field that checks the address, shows its submitting state and morphs into a confirmation. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/heroes-03.json` ### Integrations - integrations-01, Integrations directory: Real tools with their marks, by category and with a search, where Connect becomes Connecting then Connected in the same pill, an approval error folds in under its card, and the grid closes ranks as cards leave a view. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/integrations-01.json` - integrations-02, Integrations marquee: Three rows of tool marks drifting at their own pace, the middle one the other way, under the product mark, with a heading, a line and one action. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/integrations-02.json` - integrations-03, Integration areas: One card per area of tools with a short line, a tool count, a link and a cluster of round marks that float gently. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/integrations-03.json` ### Legal - legal-01, Policies with a section index: Terms, privacy and cookies in one page: a rail of documents whose highlight travels, each document crossfading in place with its reading time and a short summary, and an index whose marker follows the section being read. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/legal-01.json` ### Logo clouds - logo-clouds-01, Marquee of placeholder marks: Neutral drawn marks with fictional names that scroll in a continuous loop, pause under the pointer and wrap into a still row when motion is reduced. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/logo-clouds-01.json` - logo-clouds-02, Static row of placeholder marks: A short line on the left and six drawn marks with fictional names in one row, two columns on phones. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/logo-clouds-02.json` ### Notifications - notifications-01, Inbox from a bell: A bell with a dot while something is unread, opening an inbox where each row leads with the task, then the event, with read and archive actions in the place of the age. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notifications-01.json` - notifications-02, Toasts in context: Four small forms that each raise a toast through the Toaster of sonner.tsx: a success out of view, a failure with its reason and Retry, a loading toast that becomes its result, and an archive with Undo. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notifications-02.json` - notifications-03, In-page notices: Notices in the flow of a page, each with a status orb, one line, an action that resolves it in place and a quiet link to the source it is about. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notifications-03.json` - notifications-04, Inbox with a reading pane: Notifications grouped by day beside the one selected: read, archive with Undo, filter by unread or mentions, and reply in place. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/notifications-04.json` ### Pricing - pricing-01, Two plans with a billing switch: A monthly and yearly segmented switch whose thumb travels while the digits of both prices roll to their new value, over two plans with example prices. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pricing-01.json` - pricing-02, One plan with a feature table: A per-seat plan whose seat count and monthly total roll to their new value when changed, beside a grouped table of everything it includes. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/pricing-02.json` ### Settings - settings-01, Profile form: A profile in three sections with a travelling highlight, a photo picked in the browser, errors that fold in and out, and an unsaved-changes bar whose Save becomes Saving then Saved. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/settings-01.json` - settings-02, Notifications by channel: Email, push and desktop as sections, each led by its channel switch that folds its events away, with a digest choice, quiet hours and the same unsaved-changes bar. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/settings-02.json` - settings-03, Workspace settings: Name and address, the default role for new members read against who holds each role, and a danger zone where archiving takes a two-second hold and deleting takes the typed name. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/settings-03.json` ### Task detail - task-detail-01, Task drawer: A task opened in a sheet docked beside the page, with arrows that walk the list, properties to pick in place, child issues, a filtered feed and a comment field pinned at the foot. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-detail-01.json` - task-detail-02, Task page with a property rail: The same task as a page: a reading column beside a rail of folding sections for properties, time and details, which joins the column on narrow screens. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-detail-02.json` - task-detail-03, Task with work tabs: A task page whose sub-tasks, comments and activity share one card behind a segmented switch, each count rolling as you check, add and comment Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-detail-03.json` - task-detail-04, Task with a conversation pane: The task beside a pinned conversation where comments and changes interleave, a teammate types an answer and the panes become a switch on phones Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-detail-04.json` ### Task lists - task-lists-01, Grouped task list: Tasks grouped by status under sticky bands, on one grid shared with the column labels, with a scope switch, a search field on the slash key and a filter menu. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-lists-01.json` - task-lists-02, Task list with bulk edits: The grouped task list with row selection, shift-click ranges and a floating bar that changes the status, priority or assignees of every selected task. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/task-lists-02.json` ### Team - team-01, Member cards on one grid: The column labels and every member card share one grid: presence, current task with its status, time today, estimate and a total that opens the day. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/team-01.json` - team-02, Member table: The same members and columns as one table surface, sortable by name and by time, with pending invitations at the end. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/team-02.json` - team-03, Invite flow: A sheet with Invite and Invited tabs that turns addresses into chips, beside the list of pending invitations it keeps up to date. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/team-03.json` - team-04, Team overview: A team page with its figures for this week or last, the members with their current task and hours, and the activity of the person picked. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/team-04.json` ## Templates ### Application - application-01, Team workspace: A Mossline workspace: a sidebar that hides and goes into a sheet on phones, My tasks grouped by status whose rows open a task drawer, an inbox behind the bell and as a page, a board whose moves change the same tasks, and the team with time today. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/application-01.json` - application-02, Analytics: Tidewell Studio reports in the sidebar shell: an overview whose figures pick what the chart draws, a weekly report with day bars and ranked projects, and project health against the sprint goal, each with a CSV export. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/application-02.json` - application-03, Settings: Lattice Studio settings: a settings rail with a way back to the app, a profile, notifications by channel and the workspace page, each saving through one unsaved-changes bar, with saved names showing in the sidebar at once. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/application-03.json` - application-04, Sign in: A focused Loomboard page: sign in with a one-time code, with links to create an account and to reset a password, all in one card that resizes from one flow to the next. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/application-04.json` - application-05, Assistant: A Quillstone assistant: conversations on the left that go into a sheet on phones, a reply that streams in while Send becomes Stop, a composer that takes files and a model, a reply that folds its reasoning and runs two tool calls, and a new chat that starts from suggested prompts. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/application-05.json` ### Marketing - marketing-01, Planning board landing page: A Loomboard home page: a navbar with sliding menu panels, a hero with a working board whose cards drag between lanes by pointer or keyboard, a marquee of placeholder marks, four views beside a live preview, a call to action and a footer with a newsletter field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/marketing-01.json` - marketing-02, Newsletter landing page: A Fernpost home page: a floating navbar, a waitlist hero that morphs into its confirmation, alternating feature rows, two plans with a Monthly and Yearly switch, questions on one card, an SDK install card and a compact footer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/marketing-02.json` - marketing-03, Per-seat pricing page: A Tallyfold pricing page: one plan whose seat count and monthly total roll to their new value when changed, a grouped table of what it includes, questions on one card and a compact footer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/marketing-03.json` - marketing-04, Changelog page: A Loomboard changelog: the navbar with Changelog marked, dated releases with their kind of change and a Load more that adds the next ones, and a footer with a newsletter field. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/marketing-04.json` - marketing-05, Contact page: A Driftdesk contact page: contact details beside a form that checks each field, shows a sending state and morphs into a confirmation, grouped questions and a compact footer. Install: `npx shadcn@latest add https://ui.ndekocode.dev/r/marketing-05.json`