A personal design system,
posed as an IDE.
entrepta is a dark-first component library you copy into your repo. Foundations, primitives, layout and feedback components. Built around editor metaphors: tabs, command palette, status bar, file paths, inline comments, shell prompts.
- tokens
- 69
- components
- 14
- themes
- 6
Three commands.
You own the code.
entrepta ships as CSS tokens + copy-paste components. No runtime SDK, no telemetry in the components you copy. Drop it into any Next.js project and start shipping.
Six principles.
One product personality.
Dark-first, always.
Both products are born dark. Light mode is optional, never priority. The deep zinc-950 is the canvas, not dashboard gray.
Editor as metaphor.
Tabs, command palette, status bar, file paths, inline comments, shell prompts, monospace metadata. Not decoration. Personality.
Typography with deliberate contrast.
Editorial serif for proper nouns. Mono for the rest. Sans only for long prose. The contrast is the signature.
Color with restraint.
Brand accent shows up in CTAs, focus rings and featured cards. Emerald is exclusive to positive status. The rest is black, white, cold gray.
High density, clear hierarchy.
A lot of information without feeling chaotic. Strict 12-col grid, defined cards, small badges and dots create secondary rhythm.
Subtle motion, or none.
Fast transitions (120–200ms), no springy theatrics. Loading uses shimmer or pulse. The product is not a demo reel.
Accessible by
default.
Built on Radix primitives so keyboard navigation, focus management, and ARIA semantics come for free. The docs site adds the rest: skip links, live regions, and motion that respects user preferences.
- keyboardevery interactive element reachable & operable
- focusvisible 3px brand ring on every focusable surface
- screen readersRadix primitives + aria-label on icon-only controls
- skip linkpress Tab on any page → jump to main content
- motionprefers-reduced-motion disables animations globally
- live regionstheme & toast changes announced to screen readers
- contrastAA targets for body copy; brand reserved for emphasis
- dark + lightevery theme ships in two modes; the user picks via data-mode
Audited by
design.
entrepta ships as copy-paste source — no runtime SDK, no telemetry, no remote code. The CLI guards against path traversal via aliases, the docs site sets a strict CSP and the usual hardening headers, and dependencies stay tight and audited.
- copy-pastecomponents land in your repo as plain source — no runtime to compromise
- no runtime telemetrythe CLI calls only npm; copied components ship zero analytics or beacons
- alias guardCLI refuses to write outside the project, even if entrepta.json is tampered
- shell-safepackage-manager spawn uses shell:false so deps can't inject commands
- csp + headersstrict Content-Security-Policy, HSTS, X-Frame-Options DENY, no Powered-By
- no evalzero eval / new Function / unsafe innerHTML in components or docs
- deps minimalregistry has 4 runtime deps, CLI has 3 — easy to keep audited
Foundations
Color primitives and semantic tokens, type scale, spacing, radius, motion.
Primitives
Button, Badge, Input, Card, Dialog, Dropdown, Tooltip, Tabs.
Layout
StatusBar and TopNav. The IDE chrome that frames the canvas.
Feedback
Toast, Skeleton, CommandPalette. Interaction signals + loading states.
Content
CodeBlock. Snippets with macOS chrome, language label and a one-click copy.
Themes
Six presets. One CLI flag to switch. Same tokens, different personality.
CLI
npx @entrepta/cli@latest init · add. Copy-paste without the clipboard.