Storybook

Our component library lives at ui.frequency.media — a Storybook instance where you can browse, test, and interact with every Frequency UI component in isolation.

What’s Inside

Storybook documents every reusable component built on the Frequency design system. Each component is rendered with live controls so you can test variants, states, and edge cases without spinning up a full application.

Category	What You’ll Find
Primitives	Buttons, inputs, badges, cards, tooltips — all styled with Frequency brand tokens
Layout	App shell, sidebar, header, page containers, responsive grid patterns
Data Display	Tables, charts, stat cards, list views — built for data-heavy dashboards
Forms	Complete form controls with validation states, error messages, and accessibility
Feedback	Toasts, modals, alerts, loading skeletons, empty states
Navigation	Tabs, breadcrumbs, pagination, command palette

Built on Mantine

All components extend Mantine v8 with Frequency brand overrides from the @frequencyads/brand package. This means every component inherits:

The full 10-color, 10-shade palette
Montserrat headings and Source Sans 3 body text
Consistent spacing, radius, and shadow scales
Component defaults (Button radius, Card shadows, etc.)


import { frequencyTheme } from '@frequencyads/brand/mantine';
import { MantineProvider } from '@mantine/core';
 
// Every Storybook story wraps with the Frequency theme
<MantineProvider theme={frequencyTheme}>
  <YourComponent />
</MantineProvider>;

Using Components in Your Project

Components from Storybook are available through the Project Blueprint. Start a new project from the blueprint and all components are ready to use:


import { AppShell } from '@/core/components/Shell';
import { Button, Card, Text } from '@mantine/core';
 
export default function Dashboard() {
  return (
    <AppShell>
      <Card>
        <Text>Your content here</Text>
        <Button>Primary Action</Button>
      </Card>
    </AppShell>
  );
}

Design Tokens in Every Story

Each story renders with the full set of Frequency CSS variables available, so you can reference brand tokens directly in custom styles:


.custom-element {
  color: var(--frequency-primary);
  font-family: var(--frequency-font-heading);
  border: 1px solid var(--frequency-secondary);
}

Accessibility

Every component in Storybook is tested against WCAG 2.1 AA standards:

Keyboard navigation and focus management
Screen reader compatibility
Color contrast ratios (4.5:1 minimum for text)
Visible focus states on all interactive elements
prefers-reduced-motion support

Visit Storybook

Browse the full component library at ui.frequency.media .