# Youj > Youj: Accessible components, animated icons, illustrations and themes that move together. It is a React UI kit with accessible components on shadcn and Base UI (`@youj/react`), motion tokens, primitives, animated icons that morph between states and brand marks (`@youj/motion`, `@youj/icons`), opt-in interface sounds the components cue as they move (`@youj/sound`), themes with contrast checked against WCAG AA, isometric illustrations drawn from the theme (`@youj/illustrations`), and the same source to copy in with `npx @youj/cli add`. It needs React 19 and Tailwind CSS v4. Agents: install with `npx @youj/cli add ` (or the packages), never `npx shadcn add`. Set up with `npx @youj/cli init`. AI coding tools can use the Youj MCP server (`npx @youj/mcp`) to search components and icons, suggest icon morphs, build themes and install items: see [AI & MCP](https://www.youj.dev/docs/mcp.md). Every page below is Markdown; [llms-full.txt](https://www.youj.dev/llms-full.txt) has them all in one file. ## Which import path | | From the packages | Copied in with `npx @youj/cli add` | | --- | --- | --- | | Components | `import { Button } from '@youj/react'` | `import { Button } from '@/components/ui/button'` | | Motion | `import { Reveal } from '@youj/motion'` | `import { Reveal } from '@/components/youj/motion/reveal'` | | Provider and themes | `import { YoujProvider, basalt } from '@youj/core'` | `import { YoujProvider } from '@/lib/youj/provider'` and `import { basalt } from '@/lib/youj/theme'` | ## Get started - [Introduction](https://www.youj.dev/docs.md): Accessible components, animated icons, illustrations and themes that move together. - [Installation](https://www.youj.dev/docs/installation.md): Set up Youj in your React app with the CLI or install it by hand. - [CLI](https://www.youj.dev/docs/cli.md): Every command and flag of the youj CLI: init, add, create, doctor and mcp. - [Choosing a level](https://www.youj.dev/docs/choosing-a-level.md): Youj is a ladder: components and blocks (cards, sections and screens), each with its own place to browse. Create assembles an app frame from copy-in parts and fills it with screens; the copy-in levels are single pieces to add to an app you have. - [AI & MCP](https://www.youj.dev/docs/mcp.md): Give your AI coding tool access to Youj components, icons, themes and installation guidance: connect the MCP server, run it yourself, and read every tool it has. - Theming - [Theming](https://www.youj.dev/docs/theming.md): Choose a preset or set your own colors, type and motion for light and dark modes. - [Looks](https://www.youj.dev/docs/looks.md): Choose how your components look with Classic or Bezel, paired with any theme. - [Backdrops](https://www.youj.dev/docs/backdrops.md): Painted, grainy grounds to show your blocks on, each with a theme preset drawn from the same colors. - More - [Figma kit](https://www.youj.dev/docs/figma.md): Build and update a Youj kit in Figma from the same tokens and icons as the packages, plus every component in Youj. - [Youj vs other libraries](https://www.youj.dev/docs/comparison.md): How Youj relates to shadcn/ui, Magic UI, Aceternity UI, HeroUI and Kibo UI, and when each is the better fit. - [Versioning and releases](https://www.youj.dev/docs/versioning.md): What a Youj version number promises while it's in alpha, what counts as a breaking change, how settled each part is, and where each release's changes and upgrade guides are. - [Contributing and credits](https://www.youj.dev/docs/contributing.md): Work on Youj itself: how the monorepo is laid out, how to run it, the checks a change passes and how to propose one, and the open-source projects Youj builds on. ## Guides - [Guides](https://www.youj.dev/docs/guides.md): Follow step-by-step guides to add Youj to your app and build with it. - [Build an app frame](https://www.youj.dev/docs/guides/build-an-app-frame.md): Put a sidebar, a top bar, an account menu and search together into the shell your app's pages live in. - [Build a marketing site](https://www.youj.dev/docs/guides/build-a-marketing-site.md): Put a header, hero, features, pricing, testimonials, FAQ and footer together from the basic components. - [Light, dark and system in Next.js](https://www.youj.dev/docs/guides/light-dark-and-system.md): Let people choose light, dark or the operating system's setting, with no flash on load. - [Composing components](https://www.youj.dev/docs/guides/composing-components.md): Build your own components with shared motion, icons and accessible controls. - [Styling hooks](https://www.youj.dev/docs/guides/styling-hooks.md): The data attributes and CSS variables you can target from your own CSS, which ones are Youj's, and which are private. - Platform - [Translating built-in text](https://www.youj.dev/docs/guides/i18n.md): Translate built-in labels, announcements and placeholders with language packs or your own text. - [Right-to-left layouts](https://www.youj.dev/docs/guides/rtl.md): Lay out Arabic, Hebrew and Persian apps right to left: sides, arrow keys, overlays and motion mirror from one dir prop. - [Touch mode](https://www.youj.dev/docs/guides/touch-mode.md): Components present and behave for how they are operated: a popover under a mouse, a bottom sheet under a thumb. - [Server rendering](https://www.youj.dev/docs/guides/ssr.md): Using Youj with React Server Components and server rendering: what runs where, what the server and the first browser render agree on, and what changes after hydration. - [Accessibility](https://www.youj.dev/docs/guides/accessibility.md): Understand Youj’s accessibility support, automated checks and what you need to test in your app. - shadcn - [Coming from shadcn/ui](https://www.youj.dev/docs/guides/shadcn.md): Move a shadcn/ui app onto Youj: install and import from @youj/react, then swap components at your own pace. - [Using with shadcn](https://www.youj.dev/docs/shadcn-registry.md): Add Youj items with the shadcn CLI, and what they need to render right. ## Components - [Components](https://www.youj.dev/docs/components.md): Find components by what you need to build, with installation and usage on each page. - Actions - [Button](https://www.youj.dev/docs/components/button.md): Start an action on the page: save, submit, open a dialog or confirm. - [Button Group](https://www.youj.dev/docs/components/button-group.md): Join related buttons, inputs and menus into one strip. - [Toggle](https://www.youj.dev/docs/components/toggle.md): Turn an option on or off with a button that stays pressed. - [Toggle Group](https://www.youj.dev/docs/components/toggle-group.md): Group related options into a single or multiple-choice control. - [Segmented Control](https://www.youj.dev/docs/components/segmented-control.md): Choose one option from a small set, with the selection always visible. - [Inline Confirm](https://www.youj.dev/docs/components/inline-confirm.md): A button that asks “Are you sure?” in its own place instead of opening a dialog, then runs the action. - [Slide to Confirm](https://www.youj.dev/docs/components/slide-to-confirm.md): Confirm a costly action with a deliberate gesture: drag the thumb to the end of the track. - [Theme Toggle](https://www.youj.dev/docs/components/theme-toggle.md): Switch the page between light and dark, or let it follow the system. - [Toolbar](https://www.youj.dev/docs/components/toolbar.md): Group controls into one tab stop, with arrow keys to move between them. - [Action Island](https://www.youj.dev/docs/components/action-island.md): A floating tray of actions over a canvas, with one clear next step. - Forms & inputs - [Form](https://www.youj.dev/docs/components/form.md): Build forms with react-hook-form, connected labels, validation and submission feedback. - [Field](https://www.youj.dev/docs/components/field.md): Connect a form control to its label, description and error messages. - [Input](https://www.youj.dev/docs/components/input.md): Collect a single line of text with clear focus and validation states. - [Textarea](https://www.youj.dev/docs/components/textarea.md): Collect multi-line text in a field that grows with its content, then scrolls. - [Input Group](https://www.youj.dev/docs/components/input-group.md): Put icons, text, shortcuts and buttons inside an input or textarea’s frame. - [Password Input](https://www.youj.dev/docs/components/password-input.md): Enter a password with a visibility toggle, optional strength meter and requirements checklist. - [Input OTP](https://www.youj.dev/docs/components/input-otp.md): Enter and verify a one-time code, with a countdown before resending. - [Number Input](https://www.youj.dev/docs/components/number-input.md): Enter or step through a number, formatted for your locale, currency or unit. - [Scrub Number Field](https://www.youj.dev/docs/components/scrub-number-field.md): A compact field you scrub: press its handle and move sideways, or type, or use the arrow keys. - [Phone Input](https://www.youj.dev/docs/components/phone-input.md): Enter a phone number with a country picker, live formatting and E.164 storage. - [Checkbox](https://www.youj.dev/docs/components/checkbox.md): Select an option with checked, unchecked and mixed states. - [Radio Group](https://www.youj.dev/docs/components/radio-group.md): Choose one option from a visible list or a set of cards. - [Choice Card](https://www.youj.dev/docs/components/choice-card.md): Pick from options shown as cards, with an icon, a description and a radio, checkbox or switch. - [Switch](https://www.youj.dev/docs/components/switch.md): Turn a setting on or off and apply it immediately. - [Slider](https://www.youj.dev/docs/components/slider.md): Adjust a value or range along a track. - [Gradient Slider](https://www.youj.dev/docs/components/gradient-slider.md): Set a value on a scale that runs from one feel to another, with named zones along it. - [Histogram Range](https://www.youj.dev/docs/components/histogram-range.md): Choose a range while seeing the distribution of values it filters. - [Dial](https://www.youj.dev/docs/components/dial.md): Adjust a value on a circular scale, with a measured value and setpoints for reference. - [Select](https://www.youj.dev/docs/components/select.md): Choose one option from a popup list. - [Native Select](https://www.youj.dev/docs/components/native-select.md): Use the browser’s built-in picker with Youj field styling. - [Tag Input](https://www.youj.dev/docs/components/tag-input.md): Enter free-form values as chips, with validation and duplicate removal. - [Rating](https://www.youj.dev/docs/components/rating.md): Collect or display a rating with stars or custom icons, including half steps. - [Calendar](https://www.youj.dev/docs/components/calendar.md): Pick a date or range from a month grid. - [Time Picker](https://www.youj.dev/docs/components/time-picker.md): Enter a time using your locale’s clock format. - [Wheel Picker](https://www.youj.dev/docs/components/wheel-picker.md): Spin a drum of values to pick one: a time, a date or any short list, one column per part. - [Hours Dial](https://www.youj.dev/docs/components/hours-dial.md): Set a window of the day on a 24-hour face, with two handles that may run past midnight. - Overlays - [Dialog](https://www.youj.dev/docs/components/dialog.md): Focus on a short task in a modal window that keeps keyboard focus inside. - [Alert Dialog](https://www.youj.dev/docs/components/alert-dialog.md): Ask for confirmation before a destructive or hard-to-reverse action. - [Share Dialog](https://www.youj.dev/docs/components/share-dialog.md): Share a document, board or file with people and by link: invite, see who has access and set what the link allows. - [Export Dialog](https://www.youj.dev/docs/components/export-dialog.md): Choose a date range, a format and the columns, see what the export holds, then run it and watch it finish or arrive by email. - [Sheet](https://www.youj.dev/docs/components/sheet.md): Open settings, filters or details in a panel that slides from a screen edge. - [Drawer](https://www.youj.dev/docs/components/drawer.md): Open a panel from a screen edge and swipe it away. - [Popover](https://www.youj.dev/docs/components/popover.md): Show a small task or extra detail in a panel anchored to a control. - [Tooltip](https://www.youj.dev/docs/components/tooltip.md): Show a short visual label on hover or keyboard focus. - [Hover Card](https://www.youj.dev/docs/components/hover-card.md): Preview a link’s destination on hover or keyboard focus. - [Tour](https://www.youj.dev/docs/components/tour.md): Walk people through a screen one element at a time, with a spotlight and a card beside it. - [Sheet Presentation](https://www.youj.dev/docs/components/presentation.md): Present an overlay as a bottom sheet on touch and keep the popover under a pointer. - [Dropdown Menu](https://www.youj.dev/docs/components/dropdown-menu.md): Open a menu of actions or options from a button. - [Context Menu](https://www.youj.dev/docs/components/context-menu.md): Open actions for an item with right-click, long press or Shift+F10. - [Radial Menu](https://www.youj.dev/docs/components/radial-menu.md): A ring of actions that fans out around the pointer: hold, drag toward one and let go. - [Command](https://www.youj.dev/docs/components/command.md): Search and choose commands or options inline, in a popover or in a dialog. - Navigation - [Tabs](https://www.youj.dev/docs/components/tabs.md): Switch between related panels of content in the same space. - [Accordion](https://www.youj.dev/docs/components/accordion.md): Expand and collapse sections to show the content you need. - [Collapsible](https://www.youj.dev/docs/components/collapsible.md): Show or hide a section of content from a single control. - [Anchor Nav](https://www.youj.dev/docs/components/anchor-nav.md): Navigate a long page with a table of contents that highlights the current section. - [Breadcrumb](https://www.youj.dev/docs/components/breadcrumb.md): Show where a page sits in your site and link back to its parent pages. - [Pagination](https://www.youj.dev/docs/components/pagination.md): Move through pages of results and show the current page. - [Item Pager](https://www.youj.dev/docs/components/item-pager.md): Step to the next or previous record of a list from its detail panel. - [Navigation Menu](https://www.youj.dev/docs/components/navigation-menu.md): Organize site navigation into panels of related links. - [Stepper](https://www.youj.dev/docs/components/stepper.md): Show progress through a sequence, including completed, current, upcoming and failed steps. - [Menubar](https://www.youj.dev/docs/components/menubar.md): Group app commands in familiar menus such as File, Edit and View. - [Bottom Tab Bar](https://www.youj.dev/docs/components/bottom-tab-bar.md): Keep a phone layout’s main destinations within reach at the bottom of the screen. - [Dock](https://www.youj.dev/docs/components/dock.md): Navigate with a row of icons that magnify under the pointer or keyboard focus. - Feedback - [Alert](https://www.youj.dev/docs/components/alert.md): Show a message that needs attention within the page, with optional dismissal. - [Banner](https://www.youj.dev/docs/components/banner.md): Show an announcement across the top of your app, with an action link and optional dismissal. - [Session Timeout](https://www.youj.dev/docs/components/session-timeout.md): Warn people before an inactive session signs out: a live countdown, Stay signed in, and a signed-out page when time runs out. - [Toast](https://www.youj.dev/docs/components/toast.md): Show brief notifications with swipe dismissal, triggered from anywhere in your app. - [Progress](https://www.youj.dev/docs/components/progress.md): Show how far a task has progressed, or that work is still running. - [Spinner](https://www.youj.dev/docs/components/spinner.md): Show that work is running during a short wait. - [Skeleton](https://www.youj.dev/docs/components/skeleton.md): Reserve space for content while it loads. - [Async Feedback](https://www.youj.dev/docs/components/async-feedback.md): Show and announce pending, success and error states on the control that starts the work. - [Empty State](https://www.youj.dev/docs/components/empty-state.md): Explain why a view is empty and help people take the next step. - Layout - [Card](https://www.youj.dev/docs/components/card.md): Group related content and actions on a card, with optional lift or lighting effects. - [Separator](https://www.youj.dev/docs/components/separator.md): Separate groups of content with a horizontal or vertical line. - [Scroll Area](https://www.youj.dev/docs/components/scroll-area.md): Contain scrolling content with slim scrollbars and fading edges that show more is available. - [Resizable](https://www.youj.dev/docs/components/resizable.md): Let people resize or collapse panels with a pointer or keyboard, and save the layout. - [Inspector Panel](https://www.youj.dev/docs/components/inspector-panel.md): One property group of a design tool's side panel: a header with its switches and actions, and rows of fields. - [Aspect Ratio](https://www.youj.dev/docs/components/aspect-ratio.md): Keep media at a fixed aspect ratio and reserve its space before it loads. - Data display - [Typography](https://www.youj.dev/docs/components/typography.md): Use consistent headings, body text, quotes, code and lists. - [Code Block](https://www.youj.dev/docs/components/code-block.md): Display highlighted code with a file name or language, optional line numbers and a copy button. - [Diff Viewer](https://www.youj.dev/docs/components/diff-viewer.md): Show the difference between two versions of a file, unified or side by side, with what changed inside each line marked. - [Kbd](https://www.youj.dev/docs/components/kbd.md): Show keyboard keys and shortcuts as keycaps. - [Avatar](https://www.youj.dev/docs/components/avatar.md): Show a person or team’s image, with initials while it loads or if it fails. - [Avatar Stack](https://www.youj.dev/docs/components/avatar-stack.md): Show a group of people as overlapping avatars, with presence and an expandable list. - [Badge](https://www.youj.dev/docs/components/badge.md): Label status, counts and metadata in a compact badge. - [Countdown](https://www.youj.dev/docs/components/countdown.md): Count down to a launch, a sale or a deadline in days, hours, minutes and seconds. - Data marks - [Sparkline](https://www.youj.dev/docs/components/sparkline.md): Show a compact trend beside a metric or inside a table row. - [Gauge](https://www.youj.dev/docs/components/gauge.md): Show a score or resource level on a fine half-ring scale, with its value and status. - [Score Ring](https://www.youj.dev/docs/components/score-ring.md): Show a score out of a range as a full ring of ticks lit up to it, with its letter grade in the middle. - [Segmented Meter](https://www.youj.dev/docs/components/segmented-meter.md): Show resource usage in cells, with warning and danger thresholds. - [Share Bar](https://www.youj.dev/docs/components/share-bar.md): Show a share of a total in a table cell or list row. - [Hatched Bar](https://www.youj.dev/docs/components/hatched-bar.md): Distinguish pending, projected or baseline amounts from settled values with hatching. - [Cell Bar](https://www.youj.dev/docs/components/cell-bar.md): Show a total built from its periods: a cell per month, each as wide as its amount, settled or projected, against a target. - [Diff Bar](https://www.youj.dev/docs/components/diff-bar.md): Compare values from models, runs or periods, with the better result highlighted. - Media - [Carousel](https://www.youj.dev/docs/components/carousel.md): Browse slides by swiping, dragging or stepping through controls, with optional autoplay. - [Track Timeline](https://www.youj.dev/docs/components/track-timeline.md): Arrange segments on tracks along a time ruler, and move, trim and snap them by pointer or keyboard, such as video clips. - [Annotated Image](https://www.youj.dev/docs/components/annotated-image.md): Point at parts of an image with numbered callouts joined by leader lines to their labels. - [Image Compare](https://www.youj.dev/docs/components/image-compare.md): Compare two pictures in one frame: drag the divider to reveal one over the other. - [Image Accordion](https://www.youj.dev/docs/components/image-accordion.md): A row of pictures where one opens wide and the rest wait as slim strips, each with a caption. - [Capsule Player](https://www.youj.dev/docs/components/capsule-player.md): Show what's playing in a capsule, with a seek rail and play, previous and next. - [Waveform Scrubber](https://www.youj.dev/docs/components/waveform-scrubber.md): Navigate a recording’s waveform with chapters, keyboard controls and clip selection. - [Voice Orb](https://www.youj.dev/docs/components/voice-orb.md): Show a voice agent's state and sound as a softly lit sphere in your theme's accent, with rings that carry the voice. - [Audio Recorder](https://www.youj.dev/docs/components/audio-recorder.md): Record a voice note or an audio clip, listen back on its waveform, then save it or discard it. - [Lottie Player](https://www.youj.dev/docs/components/lottie-player.md): Play Lottie animations with shared speed controls, theme colors and reduced-motion support. - Capsules - [Capsule](https://www.youj.dev/docs/components/capsule.md): Put one row of controls or figures on a floating pill: live stats, a now-playing player, steppers, a search and small toggles. - [Stat Pill](https://www.youj.dev/docs/components/stat-pill.md): Show one live figure in a capsule, with its unit and how it's changing. - [Capsule Stepper](https://www.youj.dev/docs/components/capsule-stepper.md): Nudge a number up or down with − and + in a capsule. - [Capsule Search](https://www.youj.dev/docs/components/capsule-search.md): A small search capsule with its shortcut on it, which opens when you start searching. - [Capsule Toggle](https://www.youj.dev/docs/components/capsule-toggle.md): Choose one of two or three options in a capsule. - Pickers & inputs - [Combobox](https://www.youj.dev/docs/components/combobox.md): Choose a value from a searchable list, with groups and async results. - [Multi-select](https://www.youj.dev/docs/components/multi-select.md): Choose several values from a searchable list and show them as compact chips. - [Color Picker](https://www.youj.dev/docs/components/color-picker.md): Choose a color with sliders, swatches, hex or OKLCH values, or an eyedropper. - [Color Opacity Field](https://www.youj.dev/docs/components/color-opacity-field.md): A color and its opacity as one control: a swatch, a hex field and a percentage. - [Currency Swap](https://www.youj.dev/docs/components/currency-swap.md): A converter card: what you pay over what you receive, a round button that flips them, the rate and the action. Crypto or plain money. - [Date Picker](https://www.youj.dev/docs/components/date-picker.md): Type a date in your locale’s format or choose it from a calendar. - [Date Range Picker](https://www.youj.dev/docs/components/date-range-picker.md): Choose a date range by typing, selecting a preset or using a calendar. - [Signature Pad](https://www.youj.dev/docs/components/signature-pad.md): Draw or type a signature on one surface, accept it to lock it, and export it as SVG or PNG. - [File Upload](https://www.youj.dev/docs/components/file-upload.md): Upload files with clear rules, validation, progress and retry controls. - [Avatar Upload](https://www.youj.dev/docs/components/avatar-upload.md): Let people upload and crop a profile photo before saving it. - [Multi-Language Input](https://www.youj.dev/docs/components/multi-language-input.md): Edit translations in one field, with a language picker and a status for each translation. - Data & tables - [Table](https://www.youj.dev/docs/components/table.md): Show rows of data in a plain, accessible table whose rows can move with Presence List. - [Data table kit](https://www.youj.dev/docs/components/data-table.md): The parts a data table is made of, on TanStack Table v9: headers that sort and resize, search and filters with chips, pages, selection, saved views, inline editing, a keyboard grid and CSV. - [Filter Chips](https://www.youj.dev/docs/components/filter-chips.md): Build a filter query from editable chips. - [Filter Builder](https://www.youj.dev/docs/components/filter-builder.md): Compose AND/OR queries from typed rules, with a draft you apply. - [Property List](https://www.youj.dev/docs/components/property-list.md): Show a record's properties as rows of icon, label and value, each one editable. - [Action List](https://www.youj.dev/docs/components/action-list.md): List what needs doing, one row each, with why, by when and the action that fixes it. - [Breakdown List](https://www.youj.dev/docs/components/breakdown-list.md): Show how a total splits: each part's color, name, value and share, keyed to a split bar. - [Contribution List](https://www.youj.dev/docs/components/contribution-list.md): Explain how a figure got from where it started to where it lands, one signed step per row. - [Tree View](https://www.youj.dev/docs/components/tree-view.md): Browse and manage nested data with selection, lazy loading and inline renaming. - [Sortable List](https://www.youj.dev/docs/components/sortable-list.md): Reorder a list by dragging or using the keyboard, with each move announced. - [Kanban](https://www.youj.dev/docs/components/kanban.md): Organize cards into columns with drag and keyboard controls, work-in-progress limits and swimlanes. - [Import mapper](https://www.youj.dev/docs/components/import-mapper.md): Bring a CSV into an app: choose a file, match its columns to your fields, fix only the rows with problems and import. - Navigation & app chrome - [Command Palette](https://www.youj.dev/docs/components/command-palette.md): Find app actions and destinations from a keyboard shortcut, with nested pages and key hints. - [Mega Menu](https://www.youj.dev/docs/components/mega-menu.md): Group navigation links into columns with captions and a featured card. - [Stepper Nav](https://www.youj.dev/docs/components/stepper-nav.md): Navigate a flow that spans pages, with links back to completed steps. - [Wizard](https://www.youj.dev/docs/components/wizard.md): Guide people through a task with step validation and an async finish action. - [App Header](https://www.youj.dev/docs/components/app-header.md): Bring your app’s navigation, search and account controls into a header that condenses on scroll. - [App Page](https://www.youj.dev/docs/components/app-page.md): Give every page of your app the same header and gutter, so each one starts at the same place. - [Sidebar](https://www.youj.dev/docs/components/sidebar.md): Organize your app’s main navigation in a sidebar that collapses to icons or hides. - [Account Menu](https://www.youj.dev/docs/components/account-menu.md): Give signed-in users a menu for their account, workspaces, theme and sign-out action. - [Workspace Switcher](https://www.youj.dev/docs/components/workspace-switcher.md): Find and switch between teams, organizations or projects, or create a new one. - [Notification Center](https://www.youj.dev/docs/components/notification-center.md): Collect notifications behind a bell, with unread counts, filters and actions. - Charts & meters - [Chart](https://www.youj.dev/docs/components/chart.md): Build charts with theme colors, shared motion and a table of the underlying values. - [Flow Graph](https://www.youj.dev/docs/components/flow-graph.md): Show the steps of a run or a pipeline as a graph that lays itself out, with each step’s state. - [Flow Lanes](https://www.youj.dev/docs/components/flow-lanes.md): Show where a stream goes: one source fanning out to a lane per destination, each a stream of particles as dense as its rate. - [Lollipop Chart](https://www.youj.dev/docs/components/lollipop-chart.md): Compare many items on one value scale: a dot on a stem from a baseline each, sorted into a curve, with one item picked and named. - [Hierarchy Chart](https://www.youj.dev/docs/components/hierarchy-chart.md): Draw an org chart, a team of teams or any parent-and-children structure as a tidy tree that folds, pans and zooms. - [Stat Card](https://www.youj.dev/docs/components/stat-card.md): Analytics tiles: a figure, how it moved, and one picture of its data, on a card or joined in a panel. - [Limit Meter](https://www.youj.dev/docs/components/limit-meter.md): Show a value against a limit, with the remaining amount and policy thresholds, such as spending. - [Treemap](https://www.youj.dev/docs/components/treemap.md): Compare parts of a whole as cells sized by value, with tooltips and keyboard access. - [Unit Chart](https://www.youj.dev/docs/components/unit-chart.md): Show counts per bucket as stacked dots, one dot per unit, over a faint grid. - [Waffle Chart](https://www.youj.dev/docs/components/waffle-chart.md): Show a whole as countable cells colored by part, square or hexagonal, with a legend that lights each part. - [Radar Chart](https://www.youj.dev/docs/components/radar-chart.md): Compare several things on the same axes, one filled shape each, with axis tooltips, a series legend and a keyboard-readable plot. - [Radial Graph](https://www.youj.dev/docs/components/radial-graph.md): Show what one thing reaches, in rings by how many hops away, with each node's kind, state and path from the center. - [Density Lanes](https://www.youj.dev/docs/components/density-lanes.md): Show when things happen, one lane of dots per kind, swelling where it's busy, on one scale with a highlight and a marker. - [Coverage Matrix](https://www.youj.dev/docs/components/coverage-matrix.md): Show how deep each row is covered by each column, with gaps hatched and a selectable row whose gaps turn red. - [Share Ring](https://www.youj.dev/docs/components/share-ring.md): Show how a total divides into parts, with each amount and share beside the ring. - [Activity Rings](https://www.youj.dev/docs/components/activity-rings.md): Show a few goals side by side as concentric rings, each filling toward its own target. - [Dot Map](https://www.youj.dev/docs/components/dot-map.md): Show where activity happens on a world map made of dots. - [Lane Meter](https://www.youj.dev/docs/components/lane-meter.md): Compare workloads across queues or pipeline stages on a shared grid. - [Day Ring](https://www.youj.dev/docs/components/day-ring.md): Show scheduled runs on a daily dial, with overlaps and the next run highlighted, such as a job schedule. - [Distribution Strip](https://www.youj.dev/docs/components/distribution-strip.md): Show a distribution as dots on a log scale, with percentile marks and a target, such as request latency. - [History Strip](https://www.youj.dev/docs/components/history-strip.md): Show daily status as colored cells, with details on hover or focus, such as uptime. - [Forecast Band](https://www.youj.dev/docs/components/forecast-band.md): Show a running total’s forecast range and when it may cross a budget. - [Calendar Heatmap](https://www.youj.dev/docs/components/calendar-heatmap.md): Show a day grid by week with intensity and the current streak, such as habit completion. - [Allocation Meter](https://www.youj.dev/docs/components/allocation-meter.md): Split a fixed total across categories and move amounts between them, such as budget envelopes. - Timelines & planning - [Seat Map](https://www.youj.dev/docs/components/seat-map.md): Choose seats from a venue plan, with price tiers, availability and keyboard navigation. - [Slot Grid](https://www.youj.dev/docs/components/slot-grid.md): Choose a bookable time from a weekly grid that shows remaining places. - [World Clock](https://www.youj.dev/docs/components/world-clock.md): Compare several time zones side by side and find a time that works for everyone. - [Timeline](https://www.youj.dev/docs/components/timeline.md): Show an activity feed grouped by day, with space made for new events. - [Stage Rail](https://www.youj.dev/docs/components/stage-rail.md): Track a pipeline’s stages, with duration, progress and status for each. - [Severity Timeline](https://www.youj.dev/docs/components/severity-timeline.md): Trace an incident’s events, durations and resolution milestones. - [Milestone Ruler](https://www.youj.dev/docs/components/milestone-ruler.md): Put a year of milestones on a ruler of fine ticks, with today marked and a callout for the one you point at. - Specialized - [Rollout Ruler](https://www.youj.dev/docs/components/rollout-ruler.md): Set a feature’s rollout stage and show when a kill switch rolls it back. - [Level Matrix](https://www.youj.dev/docs/components/level-matrix.md): Set a level for each row and column pair, with pending changes and bulk editing, such as access by role and resource. - [Progress Path](https://www.youj.dev/docs/components/progress-path.md): Show progress through ordered sections of items, with mastery and section milestones, such as a course. - [Progress List](https://www.youj.dev/docs/components/progress-list.md): List items with progress, speed, time remaining and controls for each, such as file transfers. - [Time Lanes](https://www.youj.dev/docs/components/time-lanes.md): Show shifts or runs in lanes across a week or a day, with overrides, proposals, handoffs and now, such as an on-call rota. - [Route Map](https://www.youj.dev/docs/components/route-map.md): Draw a route on a tile-free map, with delayed stretches, a proposed reroute and cards anchored to stops. - [Proposal Card](https://www.youj.dev/docs/components/proposal-card.md): Weigh a proposed change against the current plan, then approve or dismiss it: a reroute, a reassignment, a new slot. - [Whiteboard](https://www.youj.dev/docs/components/whiteboard.md): Sketch, write sticky notes, connect shapes, embed your own components, pin comments and see who else is on the board, then export the scene. - [Live Cursors](https://www.youj.dev/docs/components/live-cursors.md): Show who is on a shared surface and where they point: cursors, names, chat bubbles and selections, fed by your own realtime channel. - [Segmented Ring](https://www.youj.dev/docs/components/segmented-ring.md): Show a sequence of segments as arcs with the current one in the center, such as the intervals of a workout. - [Refill Meter](https://www.youj.dev/docs/components/refill-meter.md): Show capacity that drains with use and refills over time, such as a rate limit’s token bucket. - [Day Rail](https://www.youj.dev/docs/components/day-rail.md): Show typed segments and time-zone changes on a daily timeline, such as a trip’s flights and stays. - [Chat](https://www.youj.dev/docs/components/chat.md): Build AI chat interfaces with components that handle streaming answers. - [Chat Message List](https://www.youj.dev/docs/components/chat/message-list.md): Follow streaming answers while letting people scroll back through the conversation. - [Chat Message](https://www.youj.dev/docs/components/chat/message.md): Display a conversation turn with actions such as copy, regenerate, rate and edit. - [Chat Markdown](https://www.youj.dev/docs/components/chat/markdown.md): Render streaming Markdown with highlighted code, tables and a writing caret. - [Prompt Input](https://www.youj.dev/docs/components/chat/prompt-input.md): Compose a message with attachments and a send button that becomes a stop control. - [Thinking](https://www.youj.dev/docs/components/chat/thinking.md): Show when an assistant is working, with a typing indicator and collapsible reasoning. - [Tool Call](https://www.youj.dev/docs/components/chat/tool-call.md): Show an assistant’s tool call, its arguments, status and result. - [Tool Approval](https://www.youj.dev/docs/components/chat/tool-approval.md): Ask before an AI agent runs a risky tool: the arguments, the risk, and Allow once, Always allow or Deny. - [Citation](https://www.youj.dev/docs/components/chat/citation.md): Link an answer to its sources with numbered markers and source previews. - [Suggestions](https://www.youj.dev/docs/components/chat/suggestions.md): Offer starting prompts and follow-up questions as chips or cards. - [Chat Empty State](https://www.youj.dev/docs/components/chat/empty-state.md): Welcome people to a new conversation with context and suggested prompts. - Visual effects - [Spotlight](https://www.youj.dev/docs/components/spotlight.md): Add a light that follows the pointer across a surface and stays visible on keyboard focus. - [Spotlight Card](https://www.youj.dev/docs/components/spotlight-card.md): Light cards under the pointer, with a shared glow across neighboring cards. - [Shimmer](https://www.youj.dev/docs/components/shimmer.md): Draw attention to an element with accent light that travels along its border. - [Shimmer Border](https://www.youj.dev/docs/components/shimmer-border.md): Highlight a container or button with light that travels along its border. - [Tilt](https://www.youj.dev/docs/components/tilt.md): Tilt a surface toward the pointer, with optional glare, then return it to flat. - [Magnetic](https://www.youj.dev/docs/components/magnetic.md): Pull an element toward a nearby pointer and return it when the pointer leaves. - [Cursor Follower](https://www.youj.dev/docs/components/cursor-follower.md): Add a cursor effect that follows the pointer and changes shape over controls, text and media. - [Liquid Glass](https://www.youj.dev/docs/components/liquid-glass.md): Put a pane of liquid glass behind a button, pill or toolbar that leans toward the pointer and squishes when pressed. - Backgrounds - [Mesh Gradient](https://www.youj.dev/docs/components/mesh-gradient.md): Add a slowly shifting, theme-aware gradient behind a hero section. - [Noise Field](https://www.youj.dev/docs/components/noise-field.md): Add a topographic background with contour lines and accent-tinted peaks. - [Aurora](https://www.youj.dev/docs/components/aurora.md): Add curtains of light behind a hero, with space below for your copy. - [Particle Constellation](https://www.youj.dev/docs/components/particle-constellation.md): Show drifting, connected particles that gather around the pointer. - [Flow Field](https://www.youj.dev/docs/components/flow-field.md): Add streaks drifting on a smooth current that the pointer stirs into a vortex. - [Swarm](https://www.youj.dev/docs/components/swarm.md): Add a flock that roams the page, then gathers and circles the pointer. - [Dot Matrix Wave](https://www.youj.dev/docs/components/dot-matrix-wave.md): Add a dot-grid background that ripples on hover and click. - [Magnetic Field](https://www.youj.dev/docs/components/magnetic-field.md): Show a dot grid that bends away from the pointer and springs back. - [Ripple Pond](https://www.youj.dev/docs/components/ripple-pond.md): Show a calm dot lattice where moving and clicking drop ripples that spread and fade. - [Warp Grid](https://www.youj.dev/docs/components/warp-grid.md): Show a line grid that sags toward the pointer like mass bending space. - [Atmosphere](https://www.youj.dev/docs/components/atmosphere.md): Float a card on a painted, grainy ground: a meadow, dunes, a copper glow or a dusk, each with a preset to match. ## Blocks - Cards - [Activity & conversations](https://www.youj.dev/docs/blocks/activity-and-conversations.md): What people said and did: threads, doc comments, feeds, inboxes, versions, chat, calls and feedback. - [Calendars & schedules](https://www.youj.dev/docs/blocks/calendars-and-schedules.md): Time as a grid or a dial: month agendas, rotas, day and week schedules, heatmaps and bookings. - [Flows](https://www.youj.dev/docs/blocks/flows.md): Where things go: splits, routes, loops and switchovers, with what moves along each path. - [Forms & inputs](https://www.youj.dev/docs/blocks/forms-and-inputs.md): Asking and setting: forms, filters, permission matrices, steppers, allocations, seat maps, controls, procedures and preferences. - [Media](https://www.youj.dev/docs/blocks/media.md): Files, pictures and sound: uploads, libraries, editors, players, arrangers and product pictures. - [Meters & limits](https://www.youj.dev/docs/blocks/meters-and-limits.md): How much is used and how much is left: limits, allowances, dials, capacity, stock, envelopes, streaks and goals. - [Networks & maps](https://www.youj.dev/docs/blocks/networks-and-maps.md): What connects to what and where: rings out from one thing, hubs and lanes, a globe of arcs and a map of regions. - [Onboarding & states](https://www.youj.dev/docs/blocks/onboarding-and-states.md): Getting started and the in-between pages: checklists, setup choices, first sources, empty and illustrated states. - [Rankings & breakdowns](https://www.youj.dev/docs/blocks/rankings-and-breakdowns.md): How a total splits and what ranks first: rings and bars, waterfalls, cause rings, budgets, forecasts and plan against actual. - [Status & health](https://www.youj.dev/docs/blocks/status-and-health.md): Is everything all right: status over 90 days, queues, tile boards and a score with what is open. - [Tables & lists](https://www.youj.dev/docs/blocks/tables-and-lists.md): Records to scan and act on: grids, tables, logs, grouped and bulk tables, spreadsheets and lists. - [Timelines & steps](https://www.youj.dev/docs/blocks/timelines-and-steps.md): Things that move through stages: event timelines, trackers, pipelines, traces, rollouts, gates, paths and roadmaps. - [Trends & comparisons](https://www.youj.dev/docs/blocks/trends-and-comparisons.md): Numbers over time and side by side: KPIs, metric charts, running totals, retention, percentiles, curves and head-to-heads. - Sections - [Call to action](https://www.youj.dev/docs/blocks/cta.md): Closing and in-page calls to action, from a slim banner to a full form or a ledger of customer results. - [Company](https://www.youj.dev/docs/blocks/company.md): Sections about the people and the answers behind the product: the story so far, the team, the open roles and an FAQ. - [Features](https://www.youj.dev/docs/blocks/features.md): Feature sections that explain what your product does, as a bento, grid, spotlight, steps or tabs. - [Hero](https://www.youj.dev/docs/blocks/hero.md): Opening sections for a landing page, from a centered headline to a terminal demo or a pointer-reactive motion panel. - [Navigation](https://www.youj.dev/docs/blocks/navigation.md): Website headers that are hard to get right by hand: mega menus that morph between panels, a floating bar that follows the page, a fullscreen menu with levels, a docs header, a shop's header, and the sitemap footer. - [Pricing](https://www.youj.dev/docs/blocks/pricing.md): Pricing sections: plan cards with a billing toggle, a comparison table, a seat picker, a single plan and a usage estimator. - [Product grid](https://www.youj.dev/docs/blocks/product-grid.md): A shop's catalog on real photographs, with filters, saves and a quick view, for a storefront or collection page. - [Product showcase](https://www.youj.dev/docs/blocks/showcase.md): Interactive and informational sections that show the product off: a guided tour, a live theme playground, role-based solutions, integrations, release news and a comparison table. - [Social proof](https://www.youj.dev/docs/blocks/proof.md): Sections that build trust: a wall of what customers say, logos and ratings, a logo cloud, a customer story, headline metrics and a security overview. - Screens - [API and integrations](https://www.youj.dev/docs/blocks/api-and-integrations.md): Developer-facing screens: API keys, webhooks and an integrations directory. - [Assistant](https://www.youj.dev/docs/blocks/assistant.md): AI conversation screens: a streamed analyst workspace. - [Authentication](https://www.youj.dev/docs/blocks/auth.md): Authentication screens: sign in, sign up, password recovery, magic link, two-factor, device authorization and the whole flow, in a card or split shell. - [Billing and team](https://www.youj.dev/docs/blocks/billing-and-team.md): Screens for the paying workspace: plan and invoices, usage and charges, and members with roles and seats. - [Checkout](https://www.youj.dev/docs/blocks/checkout.md): Checkout screens for a one-off order or a subscription, with an order summary in view. - [Dashboards](https://www.youj.dev/docs/blocks/dashboards.md): Overview screens: analytics, a conversion funnel, a usage report, a spend overview and a personal bank’s home. - [Freight](https://www.youj.dev/docs/blocks/freight.md): One screen for running freight: the fleet on a map, the dispatch board and one shipment in full, as views in tabs. - [Help and search](https://www.youj.dev/docs/blocks/help-and-search.md): Screens for finding answers: a help center and a search results page. - [Landing page](https://www.youj.dev/docs/blocks/landing.md): A whole landing page stacked from ten section blocks: the header, a hero, features, metrics, customer proof, pricing, an FAQ, a closing call to action and the footer. - [List and detail](https://www.youj.dev/docs/blocks/list-detail.md): Screens that pair a list with a reading pane: notifications, a list with detail and a record drawer. - [Onboarding](https://www.youj.dev/docs/blocks/onboarding.md): Screens for getting started: onboarding, creating a workspace, accepting an invite and a multi-step setup wizard. - [Planning](https://www.youj.dev/docs/blocks/planning.md): Screens for planning work and time: a Kanban board and a week calendar. - [Product and order](https://www.youj.dev/docs/blocks/storefront.md): Screens for the shopper: a product detail page and an order detail with delivery progress. - [Product updates](https://www.youj.dev/docs/blocks/product-updates.md): Screens that show where the product is heading: a versioned changelog and a public roadmap. - [Reading](https://www.youj.dev/docs/blocks/reading.md): A screen for long-form reading: documentation with a page tree. - [Settings and profile](https://www.youj.dev/docs/blocks/settings.md): Account screens: a tabbed settings page and a public profile. - [Status](https://www.youj.dev/docs/blocks/status.md): Screens for when a page can't do its job: sign in, no access, not found, errors, maintenance, loading, a launch, tracking, a public status page and a pre-launch waitlist, most beside a miniature that plays the page's state. - [Surveys](https://www.youj.dev/docs/blocks/surveys.md): Both sides of a survey: the builder where it's written, branched, styled and published, and the ways people answer it (one question at a time, a single page, a deck of cards for the phone, a widget in your product), all from one survey definition, with its results at a glance. - [Tables](https://www.youj.dev/docs/blocks/tables.md): Table screens for any list of records: customers and a virtualized orders grid. - [Workspace tools](https://www.youj.dev/docs/blocks/workspace-tools.md): Task-specific tools: a file manager, a music studio and a collaborative canvas. - Specialized - [Specialized](https://www.youj.dev/docs/blocks/specialized.md): Distinct, single-purpose pieces with their own look. Use them as they are or as a starting point. ## Visuals - [Miniatures](https://www.youj.dev/docs/miniatures.md): Interactive isometric models of real things, for React: a turntable that plays, a server cabinet that fails over, an hourglass that is also a progress indicator. - Icons - [Using icons](https://www.youj.dev/docs/icons.md): Use animated icons to show actions and states in your interface. - [YoujIcon](https://www.youj.dev/docs/icons/youj-icon.md): Animate lucide-react icons with the same triggers as Youj icons. - [Icons in your components](https://www.youj.dev/docs/icons/in-your-components.md): Add icons to controls with the right triggers, sizes and accessible labels. - Icon state - [Morphs](https://www.youj.dev/docs/icons/morphs.md): Show a control’s state with icons that morph between meanings, such as play and pause. - [IconSwap](https://www.youj.dev/docs/icons/icon-swap.md): Transition between icons to show a change of state, including morphing one shape into another. - [useIconState](https://www.youj.dev/docs/icons/use-icon-state.md): Keep a toggle button’s state, icon and accessible labels in sync. - Illustrations - [Illustrations](https://www.youj.dev/docs/illustrations.md): Ready-made isometric scenes for the moments every product has, drawn from your theme. Install one on its own, draw it by id, or hand it to a block. - [Draw your own](https://www.youj.dev/docs/illustrations/draw-your-own.md): Draw isometric scenes of your own with the stage, shapes, exploded stacks and illustration kit that every ready-made scene is built from. - [Grid Backdrops](https://www.youj.dev/docs/illustrations/grid-backdrops.md): Add dot, line or isometric grids behind your content using theme colors. - Loaders - [Loaders](https://www.youj.dev/docs/loaders.md): Loaders are loading animations with depth, drawn in your theme. Particle fields in perspective, wireframes and lit solids, waveforms, the youj letterforms and moments from the tools people wait in, each a polite status and a still frame under reduced motion. ## Motion - [Motion](https://www.youj.dev/docs/motion.md): Animate your interface with shared timing, speed controls and reduced-motion support. - [Motion principles](https://www.youj.dev/docs/motion/principles.md): The motion principles behind Youj shown side by side, then a duration and curve for each kind of interaction, reduced motion, and when to leave content still. - [Motion tokens](https://www.youj.dev/docs/motion/tokens.md): Reference for the motion tokens: every duration, easing curve, spring and stagger step, per motion personality, with the time scale and reduced motion. - [Overlay presets](https://www.youj.dev/docs/motion/presets.md): Animate Base UI overlays and panels with CSS utilities that follow speed and reduced-motion settings. - [Motion in your components](https://www.youj.dev/docs/motion/in-your-components.md): Use Youj timing in your components so they follow shared speed and reduced-motion settings. - [Primitives](https://www.youj.dev/docs/motion/primitives.md): Animate your content with reveals, text effects, counters, loops and scroll effects. - [Reveal](https://www.youj.dev/docs/motion/reveal.md): Animate content in as it loads or scrolls into view, and out as it leaves, with fades, slides, blur and more. - [Stagger](https://www.youj.dev/docs/motion/stagger.md): Animate a group of elements in sequence, with shared timing and order controls. - [TextSplit](https://www.youj.dev/docs/motion/text-split.md): Reveal text by character, word or line while keeping one readable copy for assistive technology. - [TextEffect](https://www.youj.dev/docs/motion/text-effect.md): Render any text with a reveal: a split-flap board, a terminal, a decode, a blur-in or rolling reels. - [ScrambleText](https://www.youj.dev/docs/motion/scramble-text.md): Reveal short text through changing random characters. - [Counter](https://www.youj.dev/docs/motion/counter.md): A number that counts up, down or rolls to its new value, formatted for the provider's locale. - [Marquee](https://www.youj.dev/docs/motion/marquee.md): Loop supporting content horizontally or vertically, pausing on hover and focus. - [Parallax](https://www.youj.dev/docs/motion/parallax.md): Add depth by moving, scaling, rotating or fading an element as the page scrolls. - [ScrollProgress](https://www.youj.dev/docs/motion/scroll-progress.md): Show reading progress through a page or scroll container as a bar or ring. - [Transitions](https://www.youj.dev/docs/motion/transitions.md): Animate state changes in your components, from labels and selections to lists and pages. - [Sliding Indicator](https://www.youj.dev/docs/motion/sliding-indicator.md): Highlight the selected item with an indicator that glides between options. - [Morph Label](https://www.youj.dev/docs/motion/morph-label.md): Change a label with a crossfade while its container adjusts to the new width. - [Collapse](https://www.youj.dev/docs/motion/collapse.md): Animate a panel’s height as it opens and closes, with support for mid-animation changes. - [Content Swap](https://www.youj.dev/docs/motion/content-swap.md): Replace a loading placeholder with content and smoothly adjust the container’s height. - [Presence List](https://www.youj.dev/docs/motion/presence-list.md): Animate items as they enter, leave or reorder in lists and tables. - [Page Transition](https://www.youj.dev/docs/motion/page-transition.md): Animate changes between routes or views and carry shared elements between them. - [Entrances](https://www.youj.dev/docs/motion/entrances.md): Build real UI in front of the viewer: each entrance reads the page's own parts and plays them in, ending on the real thing. - [Blueprint](https://www.youj.dev/docs/motion/blueprint.md): Draft real UI as an architect's blueprint, with its measurements, then build it up stage by stage into the real thing. - [Generate](https://www.youj.dev/docs/motion/generate.md): Build real UI in part by part, in its real colors: regions dragged out, text typed in, controls popped, icons drawn. - [Prism](https://www.youj.dev/docs/motion/prism.md): Lock real UI in piece by piece out of its color channels: three faint copies slide together and snap into register as the real thing. - [Trace](https://www.youj.dev/docs/motion/trace.md): Light real UI up like a circuit: a thin signal runs its layout and each part appears as the signal reaches it. - [Inspector](https://www.youj.dev/docs/motion/inspector.md): Show real UI first as the browser's box model, part by part, with a hover reading out each size, then hand each part to the real thing. - [Layers](https://www.youj.dev/docs/motion/layers.md): Show real UI first as an exploded isometric stack of its layers, then settle the camera flat as the stack collapses into the real thing. - [Render passes](https://www.youj.dev/docs/motion/render-passes.md): Play real UI in as the browser's pipeline: a layout pass, a paint pass and a composite pass, each sweeping through the parts with its count. ## Sound - [Sound](https://www.youj.dev/docs/sound.md): Add interface sounds for actions and feedback. Audio loads only when sound is enabled and unmuted. - [Custom sounds](https://www.youj.dev/docs/sound/custom-sounds.md): Replace built-in sounds with your own files or another sound from the library. - [API](https://www.youj.dev/docs/sound/api.md): Configure sound playback, trigger cues and define custom sound packs. ## Create Build the app frame (sidebar, top bar, account and search) at https://www.youj.dev/create, add the in-app screens it holds (dashboards, tables, settings, billing, an assistant…), each a page of its nav, then take it home as code with `npx @youj/cli create ''`. ## Project - [FAQ](https://www.youj.dev/faq.md): licence, shadcn/ui, React and Next.js support, bundle size, reduced motion, theming, icons, accessibility, i18n and help. - [Changelog](https://www.youj.dev/changelog): every release, with the migration for each breaking change; RSS at https://www.youj.dev/changelog.xml. - [About & support](https://www.youj.dev/about): the principles, the packages, credits, the maintainer, and where to report bugs and ask questions. - [Roadmap](https://www.youj.dev/roadmap.md): a summary of 0.1 and high-level themes for now, next, later and being explored, without dates. - [Security](https://www.youj.dev/security.md): supported versions, how to report a vulnerability privately, the supply chain, and what the CLI, MCP server and sound do on your machine. ## Optional - [Components, short](https://www.youj.dev/llms-small.txt): every component's import, one-line description and main props in one small file; https://www.youj.dev/llms-full.txt has every page. - [Icons explorer](https://www.youj.dev/icons): every Youj icon, searchable by meaning, with the Morph Lab. - [Illustrations explorer](https://www.youj.dev/illustrations): every isometric scene, searchable by name, category and tag, each installable on its own (`npx @youj/cli add illustration-`) and downloadable as SVG or PNG. - [Registry](https://www.youj.dev/r/registry.json): the registry index the Youj CLI reads.