UI Kit | Vepa Studio

01 · Buttons

Buttons for every action

Six variants on one pill shape, three heights (36, 44 and 52px) and honest loading and disabled states.

Variants

One primary action per view; everything else steps back.

Focus ring

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive" leadingIcon={<Trash2 />}>Delete</Button>
<Button variant="link">Link</Button>

Sizes

Small, medium and large, with square icon-only buttons to match.

<Button size="sm" variant="secondary">Small</Button>
<Button size="md" variant="secondary">Medium</Button>
<Button size="lg" variant="secondary">Large</Button>

<IconButton size="sm" variant="outline" label="Filters" icon={<SlidersHorizontal />} />

With icons

Leading icons name the action; trailing icons show where it leads.

<Button leadingIcon={<Download />}>Download</Button>
<Button variant="outline" trailingIcon={<ArrowRight />}>Continue</Button>
<IconButton variant="outline" label="Share" icon={<Share2 />} />

Loading & disabled

Loading keeps the width, sets aria-busy and announces progress. Press it.

aria-busy
Live region

const [saving, setSaving] = useState(false);

<Button loading={saving} onClick={save}>Save changes</Button>
<Button disabled>Disabled</Button>

Full width

For forms, dialogs and narrow screens.

<Button fullWidth>Create account</Button>
<Button fullWidth variant="outline" leadingIcon={<Mail />}>
  Continue with email
</Button>

Groups & segmented control

Join related actions, or pick one option with native radio buttons.

Keyboard
Radio group

ListBoardTimeline

<ButtonGroup label="Edit">
  <Button variant="outline" className={buttonGroupItem}>Copy</Button>
  <Button variant="outline" className={buttonGroupItem}>Edit</Button>
  <Button variant="outline" className={buttonGroupItem}>Share</Button>
</ButtonGroup>

<SegmentedControl
  legend="View"
  name="view"
  defaultValue="board"
  options={[
    { value: "list", label: "List" },
    { value: "board", label: "Board" },
    { value: "timeline", label: "Timeline" },
  ]}
/>

02 · Tabs

Tabs, from classic to playful

Every variant follows the WAI-ARIA tabs pattern: arrow keys move between tabs, Home and End jump to the ends, and Tab moves on to the panel.

Underline

The workhorse: a brand indicator glides under the selected tab.

Keyboard
ARIA

Open tasks: 24
Due this week: 6
Completed: 128

<UnderlineTabs
  label="Project"
  tabs={[
    { label: "Overview", content: <Overview /> },
    { label: "Activity", content: <Activity /> },
    { label: "Files", content: <Files /> },
  ]}
/>

Pill / segmented

For switching views of the same data.

Keyboard
ARIA

Visitors

8,930+8%

<PillTabs
  label="Traffic period"
  tabs={[
    { label: "Day", content: <Traffic period="day" /> },
    { label: "Week", content: <Traffic period="week" /> },
    { label: "Month", content: <Traffic period="month" /> },
  ]}
/>

With icons & counts

Badges read out with the tab name, so counts are never visual-only.

Keyboard
ARIA

Can we move the review to Thursday?09:12
Invoice #1042 is ready08:40

<UnderlineTabs
  label="Mailboxes"
  tabs={[
    { label: "Inbox", icon: <Inbox />, count: 12, content: <Messages /> },
    { label: "Assigned", icon: <UserCheck />, count: 3, content: <Tasks /> },
    { label: "Archived", icon: <Archive />, content: <Archived /> },
  ]}
/>

Wave

A playful bar: the selected day lifts into a wave that springs across.

Keyboard
Motion-safe

Wednesday

11:00

Visual design presentation.

<WaveTabs />

Vertical

Side navigation for settings pages; arrow up and down move between tabs.

Keyboard
ARIA

Profile

How you appear to your team.

Name: Alex Morgan
Email: [email protected]

<VerticalTabs
  label="Settings"
  tabs={[
    { label: "Profile", icon: <User />, content: <Profile /> },
    { label: "Notifications", icon: <Bell />, content: <Notifications /> },
    { label: "Security", icon: <ShieldCheck />, content: <Security /> },
  ]}
/>

Swipe cards

Drag or swipe sideways; the dots are real tabs for keyboard users.

Swipe
Keyboard
Motion-safe

1 / 3

Plan

Map goals, audience and content before a pixel is drawn.

<SwipeableTabs label="Onboarding" tabs={slides} />

Vertical swipe

Story-style cards that move up and down.

Swipe
Keyboard
Motion-safe

Swipe up

Or use the dots and arrow keys to move between cards.

<VerticalSwipeableTabs label="Stories" tabs={stories} />

03 · Navbars

Navbars for sites and apps

Headers that adapt to their container, mark the current page and open menus that work from the keyboard; plus mobile tab bars.

Marketing

Logo, links, sign-in and one clear call to action. Collapses to a menu when narrow.

aria-current
Disclosure

Acme

Get started

<MarketingNavbar label="Main" />

App header

Navigation, search, notifications and an account menu that closes when focus leaves it.

Search landmark
Menu
Escape

Acme

<AppHeader label="App" />

Centred logo

Links either side of the brand, as on shops and portfolios.

aria-current

<CenteredNavbar label="Main" />

Responsive drawer

On small screens the menu slides in as a modal drawer that keeps focus inside.

Dialog
Focus trap

Acme

<ResponsiveNavbar label="Main" />

Gooey pill

A floating pill whose blob stretches to follow hover and focus.

Motion-safe

<GooeyHorizontalNavbar label="Main" />

Bottom navigation

Mobile tab bars: icon links named for screen readers, with the current page marked.

aria-current
Motion-safe

9:41
Sliding circle
9:41
Floating dock
9:41
Glow line

<SlidingCircleNav label="Mobile navigation" />
<FloatingDockNav label="Mobile navigation" />
<GlowLineNav label="Mobile navigation" />

04 · Pagination

Pagination for long lists

Numbered, simple, compact and load-more patterns. The current page is announced, and Previous and Next stay focusable at the ends.

Numbered

First, previous, a steady window of pages with ellipses, next and last.

aria-current
Keyboard

<NumberedPagination totalPages={20} defaultPage={7} label="Results pages" />

Simple

Previous and next with a live “Page X of Y” readout.

Live region

<SimplePagination totalPages={10} defaultPage={3} label="Invoices pages" />

Compact

A small joined control for cards and table footers.

aria-current

<CompactPagination totalPages={5} label="Gallery pages" />

Load more

Appends the next batch, announces the new count and moves focus to the first new item.

Focus management
Live region

Harbour Coffee2026Design
Northwind Legal2026Development
Pixel Parade2026Marketing
Atlas Fitness2026Design
Juniper Dental2026Development
Brightside Tours2026Marketing

Showing 6 of 18 projects

<LoadMore pageSize={6} />

05 · Forms

Forms people can finish

Labelled fields with autocomplete hints, clear errors, native selects, checkboxes, radios and switches. The demos never send data anywhere.

Text fields

Default, with an icon, password with a show / hide toggle, error and disabled. Hints and errors are linked to the field.

aria-invalid
Autocomplete

Full name

Email

We'll only use this for receipts.

Phone

Password

At least 8 characters.

Website

Enter a URL that starts with https://

Workspace ID

Set by your administrator.

<TextField label="Full name" autoComplete="name" />
<TextField label="Email" type="email" icon={<Mail />} autoComplete="email" />
<PasswordField label="Password" autoComplete="new-password" hint="At least 8 characters." />
<TextField label="Website" error="Enter a URL that starts with https://" />
<TextField label="Workspace ID" defaultValue="acme-studio" disabled />

Select & textarea

A native select in the field style, and a textarea with a character count.

Native select

Role

Project brief

0 / 280 characters

<SelectField
  label="Role"
  options={[
    { value: "design", label: "Designer" },
    { value: "dev", label: "Developer" },
  ]}
/>
<TextareaField label="Project brief" maxLength={280} />

Checkboxes

Native checkboxes in a fieldset, each with a linked description.

Fieldset
Keyboard

Email me about

Product updates

New components, fixes and release notes.

Events

Webinars and meet-ups near you.

Tips

One short design tip a month.

<fieldset>
  <legend>Email me about</legend>
  <Checkbox label="Product updates" description="New components and fixes." />
  <Checkbox label="Events" description="Webinars and meet-ups." />
</fieldset>

Radio cards

Selectable cards built on native radios, so arrow keys move the choice.

Radio group
Keyboard

Plan

StarterFor individuals and side projects.TeamPopularCollaboration for growing teams.EnterpriseSSO, audit logs and priority support.

<RadioCards
  legend="Plan"
  name="plan"
  defaultValue="team"
  options={[
    { value: "starter", label: "Starter", description: "For side projects." },
    { value: "team", label: "Team", description: "For growing teams.", badge: "Popular" },
  ]}
/>

Switches

Instant on / off settings with role=“switch” and a visible label.

role=switch
Keyboard

Email notifications

Summaries of project activity.

Two-factor authentication

Ask for a code when signing in.

Public profile

Let clients see your portfolio.

<Switch label="Email notifications" description="Summaries of project activity." />
<Switch label="Two-factor authentication" defaultChecked />

Log in / register

Two forms as tabs, with inline validation that moves focus to the first problem.

Tabs
Validation
Autocomplete

Acme

Welcome to Acme

Log in or create an account to continue. All fields are required.

<LoginRegister />

06 · Foundations

The system underneath

One set of tokens behind every component: a warm brand scale used with restraint, one radius scale, three elevations and three control heights.

Colour

The brand ramp, the roles each shade plays, and a small status set that keeps AA contrast.

AA contrast

50
100
200
300
400
500
600
700
800
900
950

brand-600Primary fill, focus ring
brand-700Accent text, hover
brand-500Indicators
brand-50Selected tint
inkText, dark surfaces
neutral-600Secondary text
neutral-500Muted text, field borders
neutral-200Hairlines

SuccessWarningInfoDangerBrandNeutral

// Orange is for primary actions, active states and focus: nothing else.
<Button>Save</Button>                      // bg-brand-600 · text-white (4.7:1)
<a className="text-brand-700">Docs</a>     // 6.4:1 on white
<span className="bg-brand-500" />          // indicators (3.4:1, non-text)

Shape & elevation

Four radii and three shadows, each with one job.

6pxCheckboxes
12pxFields
16pxCards
FullActions

RestControls, cards
RaisedSelected pills
FloatingMenus, frames

rounded-md    // 6px: checkboxes
rounded-xl    // 12px: fields, small surfaces
rounded-2xl   // 16px: cards, frames, panels
rounded-full  // actions: buttons, tabs, pills

shadow-xs     // rest · shadow-md: raised · shadow-xl: floating

Type & sizing

Inter Tight for headings, Instrument Serif for accents, Inter for text — and three control heights.

DisplayInter Tight

AccentInstrument Serif Italic

Body text for everything elseInter

font-display  // Inter Tight: headings, light + tight tracking
font-serif    // Instrument Serif italic: accent words (<em>)
font-sans     // Inter: everything else

<Button size="sm" />  // h-9  (36px)
<Button size="md" />  // h-11 (44px), also fields and pill tracks
<Button size="lg" />  // h-13 (52px)

Components ready for your next project.

Variants

Sizes

With icons

Loading & disabled

Full width

Groups & segmented control

Underline

Pill / segmented

With icons & counts

Wave

Monday

Tuesday

Wednesday

Thursday

Friday

Vertical

Profile

Notifications

Security

Billing

Swipe cards

Plan

Vertical swipe

Swipe up

Marketing

App header

Centred logo

Responsive drawer

Gooey pill

Bottom navigation

Numbered

Simple

Compact

Load more

Text fields

Select & textarea

Checkboxes

Radio cards

Switches

Log in / register

Welcome to Acme

Colour

Shape & elevation

Type & sizing

Want these components in your product?