Components
Every building block used across the 40 templates in the UI Starter Pack, in one place. Vanilla HTML & CSS, one shared stylesheet, light and dark built in.
Colors
One accent, a neutral ink/paper scale, and four semantic colors for status. Every value is a CSS custom property, so switching themes is a single attribute change.
Typography
Nunito for headings — rounded, friendly, never sharp. Inter for body copy. A monospace face is reserved for code and file paths only.
Spacing & radius
An 8px spacing rhythm and three radius steps — small for inputs, medium for buttons and controls, large for cards and surfaces.
Buttons
Primary, secondary, ghost and danger variants, each in three sizes.
Inputs
Text fields, search, and textarea — all sharing one focus ring style.
<label>Email address</label>
<input type="email">
</div>
Switches & checkboxes
Used across every settings and preferences screen.
Badges & tags
Status pills for tables and cards, plus neutral tags for categorization.
Avatars
Initials-based by default; stack for showing team membership at a glance.
Cards
The base surface for nearly everything — dashboards, settings panels, pricing.
Manage who has access to this workspace and what they can do.
Stat cards
The core unit of every dashboard overview row.
Tables
Row hover, consistent padding, and badges for status columns.
Charts
Dependency-free — plain CSS bars and inline SVG, no chart library.
Toasts
Brief confirmation messages that fade in from the bottom corner.
Modal
Centered dialog with a dimmed backdrop, used for confirmations and quick forms.
Skeleton loading
A shimmering placeholder shown while real content loads in.
Empty states
Shown when a list, search, or inbox has nothing to display yet.
No results found
Try a different search term.
Tabs
Used to split billing, settings, and profile pages into sub-views.
Overview panel content goes here.
Members panel content goes here.
Billing panel content goes here.
Accordion
Collapsible sections for FAQs and course curriculum outlines.
Kanban board
Reusable column + card pattern for the project management templates.
Password strength meter
A lightweight visual cue during account creation — color only, no numeric score.
Verification code
Six-box OTP entry used on the two-factor and email verification screens.
Step wizard
A slim progress bar for multi-step onboarding flows.
Status icon circle
Confirmation and empty-state icon treatment — swap the tint for a different semantic color.
Role picker
Selectable cards for the onboarding "what best describes you" step.
Workspace switcher
Shown after login when an account belongs to more than one organization.
Search field
The icon-inset search input used in every dashboard topbar.
Notification button
Circular icon button with an unread dot, used in every app topbar.
User account row
Pinned to the bottom of the sidebar; opens the account menu on click.
Feature grid
Icon, heading and description block used across the landing page templates.
Fast by default
No build step, no dependencies — every template loads in under a second.
Accessible
Every interactive component ships with visible focus states and correct roles.
Pricing cards
Two or three-tier layout with one card marked as featured.
- All 40 templates
- Community support
- Everything in Starter
- Figma source files
Testimonial cards
Quote plus attribution, laid out on a tinted surface instead of a bordered card.
"We replaced eleven internal components with this kit in a week."
Timeline
Vertical activity feed used on the user activity log and changelog templates.
Signed in from a new device
Chrome on macOS — San Francisco, CA
Password changed
Requested via account settings
Code window
A larger syntax-highlighted showcase for developer-tool landing pages.
import { Button } from 'starter-pack' // drop it straight in export default () => <Button>Ship it</Button>