System · 07

Components

The building blocks that make a UpRys interface look like a UpRys interface. Composed from shadcn primitives and our tokens — import from @/components/ui.

Primitives

The full interactive library. Every control is keyboard-accessible and themed by the design tokens.

Actions

Button

<Button variant size />

The primary action primitive. Five variants, four sizes.

A11y · Renders a native <button>; use asChild to wrap a link while keeping button semantics.

Badge

<Badge variant />

Compact status and metadata labels.

A11y · Decorative by default — pair with text, don't rely on color alone.

Default

Secondary

Outline

Destructive

Active

Dropdown menu

<DropdownMenu />

Triggered menu of actions.

A11y · Full keyboard navigation and focus trapping via Radix; arrow keys move between items.

Tooltip

<Tooltip />

Contextual hint on hover or focus.

A11y · Shows on focus as well as hover; never put essential info only in a tooltip.

Form controls

Input & Textarea

<Input /> <Textarea />

Text entry — with default, error, and disabled states.

A11y · Always associate a <Label htmlFor>; mark errors with aria-invalid + a message, not color alone.

Email (error)

Enter a valid email address.

Email (disabled)

Note

Checkbox, Switch & Radio

<Checkbox /> <Switch /> <RadioGroup />

Boolean and single-choice controls.

A11y · Each control has an associated label; Switch announces on/off state.

I agree to the engagement terms

Email me product updates

Monthly

Annual

Select

<Select />

Single choice from a list.

A11y · Typeahead and arrow-key navigation built in; trigger exposes the current value.

Slider

<Slider />

Select a value from a range.

A11y · Arrow keys adjust; Home/End jump to bounds. Provide an aria-label.

Overlays & feedback

Dialog

<Dialog />

Modal for focused tasks and confirmations.

A11y · Focus is trapped and restored on close; Esc dismisses; backdrop is inert.

Toast

toast() — sonner

Transient confirmation of an action.

A11y · Announced politely to assistive tech; auto-dismisses with a pause-on-hover.

Alert

<Alert variant />

Inline, persistent message.

A11y · Use variant + an icon + text; never color alone to signal severity.

Heads up

Your next brand review is scheduled for June.

Action required

Two assets are missing usage terms.

Progress & Skeleton

<Progress /> <Skeleton />

Determinate progress and loading placeholders.

A11y · Progress exposes value to assistive tech; skeletons are decorative (aria-hidden).

Data display

Card

<Card />

The standard content container.

A11y · Use a heading inside CardTitle so the card is navigable by structure.

Discovery

Listen first. Map the terrain before naming the path.

A two-week engagement to understand your people, process, and tools.

Avatar

<Avatar />

Represents a person or org, with a fallback.

A11y · Fallback initials ensure identity is conveyed without the image.

ABCDEF

Tabs

<Tabs />

Switch between related views.

A11y · Roving tabindex; arrow keys move between tabs, matching ARIA tabs pattern.

A quiet, editorial system built on a single set of tokens.

Accordion

<Accordion />

Progressively disclose content.

A11y · Headers are buttons; expanded state is announced to assistive tech.

Accessibility

Focus & motion

focus-visible · prefers-reduced-motion

Keyboard focus and reduced-motion behavior.

A11y · Tab through these to see the coral focus ring (2px). All transitions shorten automatically when the OS requests reduced motion.

and meEvery interactive element shows a visible focus ring.

Brand patterns

Compositions that carry the brand — reach for these in marketing and high-visibility product moments.

01 · Action

Pill actions

Primary action Secondary Tertiary link

<Link className="rounded-full bg-foreground text-background px-7 py-3.5 hover:bg-[var(--uprys-coral)]">Action</Link>

02 · Card

Indexed card

Discover