# entrepta > A dark-first React design system you copy into your repo with a CLI, in the shadcn model: near black surfaces, mono for UI, serif italic for titles, no mark of its own. Tailwind v4, Radix, seven themes, every ink measured for WCAG AA. Every page below is Markdown. Add `.md` to any docs URL for the same. For a guide fitted to one project, build an AGENTS.md at https://entrepta.vercel.app/?agents=open. ## Docs - [Introduction](https://entrepta.vercel.app/docs.md): What entrepta is, the quick start, and where to go next - [Installation](https://entrepta.vercel.app/docs/installation.md): Requirements, init and what it writes, adding components - [CLI reference](https://entrepta.vercel.app/docs/cli.md): init, add, their flags and entrepta.json - [Themes](https://entrepta.vercel.app/docs/themes.md): The seven presets and runtime switching - [Foundations](https://entrepta.vercel.app/docs/foundations.md): The seven foundations pages, one line each - [Color](https://entrepta.vercel.app/docs/foundations/color.md): Zinc neutrals and one brand. Surfaces, inks and accents, measured live for your theme. - [Typography](https://entrepta.vercel.app/docs/foundations/typography.md): Three families. Newsreader serif for headlines, JetBrains Mono for UI, Inter for prose. Ten size tokens. - [Grid & spacing](https://entrepta.vercel.app/docs/foundations/spacing.md): 12-column grid, 24px gutter, 1280px max. Base spacing scale from 4px to 96px. - [Radius & motion](https://entrepta.vercel.app/docs/foundations/motion.md): Soft corners from 6 to 24px. Motion with a job: entrances, counters, light. Always a reduced-motion path. - [Accessibility](https://entrepta.vercel.app/docs/foundations/accessibility.md): Inks measured in every theme, focus, the skip link, reduced motion, screen reader patterns. - [Rules](https://entrepta.vercel.app/docs/foundations/rules.md): The do and don't list, each one written after a real bug. - [Data](https://entrepta.vercel.app/docs/foundations/data.md): Money in minor units, plain dates, changes with a sign, the series palette, loading and empty states. - [What's new in v4](https://entrepta.vercel.app/docs/whats-new-in-v4.md): The library without the mark, and taylor, a flat monochrome theme - [Migrating to v4](https://entrepta.vercel.app/docs/migrating-to-v4.md): What changed from 3.x, how to bring the old look back, and what was removed - [What's new in v3](https://entrepta.vercel.app/docs/whats-new-in-v3.md): Every new component by section, what changed, and the one command to update - [Migrating to v2](https://entrepta.vercel.app/docs/migrating-to-v2.md): Step by step for an agent, including every new component - [Components](https://entrepta.vercel.app/docs/components.md): Every component with a one-line description ## Components - [Button](https://entrepta.vercel.app/docs/components/button.md): Primary action button with 4 variants, icon sizes and a loading state - [Badge](https://entrepta.vercel.app/docs/components/badge.md): Status badge, solid/soft/outline across 6 semantic colors, with a dot or an icon - [Avatar](https://entrepta.vercel.app/docs/components/avatar.md): A person or a thing as an image over its initials, with a presence dot and a stacked group - [IconTile](https://entrepta.vercel.app/docs/components/icon-tile.md): An icon in a tinted square, for a category, an account or a status, with a corner badge - [Card](https://entrepta.vercel.app/docs/components/card.md): Content card, default/featured/data variants in three sizes - [Dialog](https://entrepta.vercel.app/docs/components/dialog.md): Modal dialog built on Radix UI with accessible close button - [Sheet](https://entrepta.vercel.app/docs/components/sheet.md): A panel from the edge to create or edit without leaving the list, that asks before losing changes - [Popover](https://entrepta.vercel.app/docs/components/popover.md): A panel anchored to a trigger, for content you work in: a calendar, a filter - [Accordion](https://entrepta.vercel.app/docs/components/accordion.md): Sections that open in place, with a trailing value in the header and actions beside it - [Dropdown](https://entrepta.vercel.app/docs/components/dropdown.md): Dropdown menu with items, checkboxes, radio groups and submenus - [Tooltip](https://entrepta.vercel.app/docs/components/tooltip.md): Hover tooltip with optional keyboard shortcut hint - [Kbd](https://entrepta.vercel.app/docs/components/kbd.md): A key or a shortcut, as a chip or plain, that turns brand in a highlighted row - [Tabs](https://entrepta.vercel.app/docs/components/tabs.md): Editor file tabs, in place or as routes, with a travelling underline, a close button and a title bar variant - [Progress](https://entrepta.vercel.app/docs/components/progress.md): How far along: a bar, a bar in steps or a ring, as a progressbar with its value in words - [Stepper](https://entrepta.vercel.app/docs/components/stepper.md): Where someone is in a flow: an ordered list, an icon or a number in each marker, the state in words - [Input](https://entrepta.vercel.app/docs/components/input.md): Text input with default, search, and command (⌘K) variants - [Textarea](https://entrepta.vercel.app/docs/components/textarea.md): Multi-line text field in sans, with an error state - [Checkbox](https://entrepta.vercel.app/docs/components/checkbox.md): Checkbox over a native input, with a label, a description and a mixed state - [Switch](https://entrepta.vercel.app/docs/components/switch.md): On/off switch over a native checkbox, with an optional label - [Field](https://entrepta.vercel.app/docs/components/field.md): Label, control and error or hint, wired together for screen readers - [MoneyInput](https://entrepta.vercel.app/docs/components/money-input.md): Money typed like a cash machine or freely, pasted in any format, held in minor units - [Select](https://entrepta.vercel.app/docs/components/select.md): A value from a short list, in a form, with the field's look and the menu's rows - [Combobox](https://entrepta.vercel.app/docs/components/combobox.md): A value from a long list you can search: groups, several values, create on the spot - [SegmentedControl](https://entrepta.vercel.app/docs/components/segmented-control.md): One choice out of a few, all in view, on native radios with a sliding indicator - [ChoiceCard](https://entrepta.vercel.app/docs/components/choice-card.md): A choice that needs more than a word: cards that are labels of native radios or checkboxes - [SwatchPicker](https://entrepta.vercel.app/docs/components/swatch-picker.md): A palette color by key, never a hex: native radios, each swatch named after its hue - [SecretField](https://entrepta.vercel.app/docs/components/secret-field.md): A secret to copy once: masked, revealed on request, copied with a polite confirmation - [FileDropzone](https://entrepta.vercel.app/docs/components/file-dropzone.md): A real file input to drop on or choose from, checking type and size, listing progress - [Calendar](https://entrepta.vercel.app/docs/components/calendar.md): A month of days to pick a day or a range from, in plain dates, on react-day-picker - [DatePicker](https://entrepta.vercel.app/docs/components/date-picker.md): A day, a range, a month or a year, picked from a calendar in a popover - [DateNavigator](https://entrepta.vercel.app/docs/components/date-navigator.md): Previous, the period, next and today, to walk through days, months or years - [FilterPill](https://entrepta.vercel.app/docs/components/filter-pill.md): Toggle pill for one filter value, or an applied filter with a × to remove it - [TopNav](https://entrepta.vercel.app/docs/components/top-nav.md): Horizontal nav bar with logo, breadcrumb, and actions slots - [ThemeSwitcher](https://entrepta.vercel.app/docs/components/theme-switcher.md): Floating theme + mode picker with no-flash ThemeScript helper - [ModeToggle](https://entrepta.vercel.app/docs/components/mode-toggle.md): Dark/light only toggle, inline or floating, with no-flash ModeScript helper - [Sidebar](https://entrepta.vercel.app/docs/components/sidebar.md): App navigation: a 56px icon rail, or labeled with groups, search and footer that folds back to the rail - [MobileNav](https://entrepta.vercel.app/docs/components/mobile-nav.md): Bottom bar with four destinations and More, which opens a sheet - [BentoGrid](https://entrepta.vercel.app/docs/components/bento-grid.md): Dashboard tiles on the 12 column grid, each one a size container, entering in order - [CodeBlock](https://entrepta.vercel.app/docs/components/code-block.md): Code container with macOS chrome, language label and a copy-to-clipboard button - [Amount](https://entrepta.vercel.app/docs/components/amount.md): Money shown one way everywhere: mono, tabular, the real minus, a muted symbol - [Metric](https://entrepta.vercel.app/docs/components/metric.md): One number with its label, how it moved and against what; loads in its own shape - [Delta](https://entrepta.vercel.app/docs/components/delta.md): How a value moved: an arrow, a sign and the change, colored by whether that is good news - [Sparkline](https://entrepta.vercel.app/docs/components/sparkline.md): The shape of a series with no axes, wiping in once on screen, for a Metric's trend - [Chart](https://entrepta.vercel.app/docs/components/chart.md): The frame for Recharts: palette colors, a tooltip in full values, a legend from three series, the data as a table - [BarList](https://entrepta.vercel.app/docs/components/bar-list.md): A ranking in rows, each label in full on a bar as long as its share; server safe - [ContributionGrid](https://entrepta.vercel.app/docs/components/contribution-grid.md): A year of days as weeks, levels from the brand, one Tab stop walked by the arrows - [Redact](https://entrepta.vercel.app/docs/components/redact.md): A value hidden behind a mask of its width when the app asks, read as hidden value - [PromptInput](https://entrepta.vercel.app/docs/components/prompt-input.md): Where a question is written: grows, sends on Cmd Enter, stops while streaming, suggestions - [ChatThread](https://entrepta.vercel.app/docs/components/chat-thread.md): A conversation by role, tool results in cards, streaming that keeps your place - [ListRow](https://entrepta.vercel.app/docs/components/list-row.md): The standard row of a list, with a leading tile, a truncating title and a trailing value - [Table](https://entrepta.vercel.app/docs/components/table.md): A real table that scrolls in its own box, with a sticky header and numbers on the right - [DataTable](https://entrepta.vercel.app/docs/components/data-table.md): Records to sort, select and hide columns in, on TanStack Table, virtualized past 500 rows - [FilterBuilder](https://entrepta.vercel.app/docs/components/filter-builder.md): Filters built from fields, each one an applied pill, kept in the URL with serializeFilters - [Alert](https://entrepta.vercel.app/docs/components/alert.md): A notice that stays until it is dealt with, its status in a tile and the corner glow - [EmptyState](https://entrepta.vercel.app/docs/components/empty-state.md): A list or a widget with nothing in it: what is missing, and the one thing to do - [Toast](https://entrepta.vercel.app/docs/components/toast.md): Toast notifications via Sonner, styled with entrepta tokens - [Skeleton](https://entrepta.vercel.app/docs/components/skeleton.md): Animated shimmer placeholder for loading states - [CommandPalette](https://entrepta.vercel.app/docs/components/command-palette.md): ⌘K command palette built on cmdk with groups, icons, and shortcuts - [Reveal](https://entrepta.vercel.app/docs/components/reveal.md): Entrance that rises and fades in once on screen, with a capped list stagger - [TypeIn](https://entrepta.vercel.app/docs/components/type-in.md): Text that assembles piece by piece, with the full sentence always in the DOM - [RollingNumber](https://entrepta.vercel.app/docs/components/rolling-number.md): Odometer counter that rolls into place and turns once on hover - [ArrowLink](https://entrepta.vercel.app/docs/components/arrow-link.md): Text link with a traveling arrow and a brand rule that wipes in ## Optional - [Everything in one file](https://entrepta.vercel.app/llms-full.txt) - [npm: @entrepta/cli](https://www.npmjs.com/package/@entrepta/cli) - [Source on GitHub](https://github.com/imnotannamaria/entrepta) - [Built with entrepta: annamaria.app](https://annamaria.app): a personal site - [Built with entrepta: wristkit](https://wristkit-web.vercel.app): Apple Health components for Next.js