logo

democrito

v3

Atoms

Base-level components — the building blocks of the design system.

11 atoms · 4 categories

Form & Input

1 components

Interactive controls and data entry components.

Button

Primary interactive element. Extends shadcn/ui Button with design system token styling, loading state, and theme-inverted primary.

Variants

Sizes

With Icons

States

<Button variant="default | secondary | destructive | outline | ghost | link" size="sm | default | lg | icon" loading={boolean} />

Input

Text input — always font-mono per spec. Card bg with accent focus ring. Extends shadcn/ui Input.

States

<Input placeholder="..." error={boolean} disabled={boolean} />

Textarea

Multi-line text input — always font-mono. Auto-resize variant. Min 80px, max 300px.

States

<Textarea placeholder="..." error={boolean} />

Form Elements

Checkbox, Radio (via Select), Switch, Select, Slider — all using shadcn/ui base with design tokens.

Checkbox

Switch

Select

Slider

0.50

Copy Button

One-click clipboard copy. Primary: label + icon with accent background. Ghost: icon-only overlay, used inside CodeBlock.

Variants

<CopyButton variant="primary | ghost" value="text to copy" label="optional label" />

Labels & Typography

6 components

Badges, tags, and typographic display components.

Badge

Pill-shaped labels using font-mono. Status, semantic, and count variants.

Default Variants

Default
Secondary
Destructive
Outline

Status

Draft
Testing
Production
Archived

Semantic

Success
Warning
Error
Info

Count & Dot

3
42
Online Busy

Sizes

Small
Default
Large
<Badge variant="default | draft | testing | production | archived | claude | gpt | gemini | lovable | success | warning | error | info | count" size="sm | default | lg" />

Tag

Border-based labels with optional remove and selectable states. Font-mono, text-xs.

Variants

defaultcoloredremovableselectableselected
<Tag variant="default | removable | selectable" color="role" selected />

Status Badge

Lifecycle status pill — draft, testing, production, archived. Semantic background tint with matching text color. Font-mono, text-xs.

All statuses

DraftTestingProductionArchived
<StatusBadge status="draft | testing | production | archived" />

Typography

Reusable Heading, Text, Code, and Kbd components enforcing the design system type scale.

Heading Levels

H1 — Page Title

H2 — Section Heading

H3 — Card Title

H4 — Subsection

Text Variants

Default body text

Muted text for secondary info

Subtle text for tertiary info

Accent text

Error text

Success text

Monospace text for data values

Code & Kbd

Inline code snippet in textPress ⌘ + K to search
<Heading level="h1 | h2 | h3 | h4" />
<Text variant="default | muted | subtle | accent | error | success" size="xs | sm | base | lg" mono={boolean} />
<Code>inline code</Code>
<Kbd>⌘K</Kbd>

Avatar

Circular avatar with image, initials fallback, status indicator. Sizes: xs(20), sm(28), md(36), lg(48).

Sizes with Fallback

XSSMMDLG

With Status

MRJDAK

Stacked Group

MRJDAKBL
<Avatar size="xs | sm | md | lg"><AvatarFallback>MR</AvatarFallback><AvatarStatus status="online" /></Avatar>

Feedback & State

1 components

Loading states, overlays, and interaction feedback.

Separator

1px border color line. Horizontal or vertical.

Left
Right

Skeleton

Loading placeholder with 1.5s pulse animation. Respects prefers-reduced-motion.

Spinner & Thinking Dots

Loading indicators. Spinner: accent border-top spin. Thinking dots: 3×6px staggered pulse.

Spinner Sizes

Loading…
Loading…
Loading…
Loading…

Thinking Dots

<Spinner size="sm | md | lg | inline" />
<ThinkingDots />

Tooltip

Inverted colors, font-body, text-xs, radius-sm, max-width 240px. Radix Tooltip.

Utilities

3 components

Progress indicators, links, brand mark, and code display.

Progress Bar

4px height, accent fill, rounded-full. Semantic color variants. Determinate + indeterminate.

Variants

default (65%)
success (100%)
warning (80%)
error (95%)
<Progress value={65} variant="default | success | warning | error | info" indeterminate={boolean} />

Code Block

Multi-line code display on --surface. Optional language label, variable {{bracket}} highlighting, and hover-reveal copy button.

With language label

tsx
import { CodeBlock } from "@/components/atoms";

<CodeBlock code={snippet} language="tsx" />

Plain (no label)

npm install democrito
<CodeBlock code="..." language="tsx" showCopy={boolean} />

Label

Form label. font-body, text-sm, font-medium. Required state with asterisk.

Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito