Skip to content

Build once.
Ship across Familis.

Reusable blocks, shared components and familiar design foundations. Preview them here, then make the source yours.

ReactBase UITailwind CSS v4
Browse blocks Explore 65 componentsExplore 9 hooks
Start with the Familis style
Create a TanStack Start project with the Familis colors, fonts and logo, then add blocks and components.
Install with shadcn
pnpm dlx shadcn@latest init --template start --base base Familis-co/registry/familis
Copy command
Installation guide

Building blocks

Metrics, preferences, search and confirmations, composed from the same shared components. Try each preview, then install the source in your project.

8 blocks
Empty state
An accessible empty state with a configurable icon, explanation, and action.
No items yet
Add your first item to get started.
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/empty-state
Copy command
View stories Registry JSON
Metric card
A dashboard metric with a caller-formatted value, trend comparison and optional footer.
Families supported
This month

128

+12%vs. last month
Updated just now
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/metric-card
Copy command
View stories Registry JSON
Settings panel
A controlled preference panel with labelled switches, per-option disabled states and optional footer actions.
Notifications
Choose how you hear from your team.
Notifications

When someone sends you a message.

A digest every Monday.

Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/settings-panel
Copy command
View stories Registry JSON
Search toolbar
A controlled search field with clear and focus restoration, loading state, result announcement and action slots.

3 families

  • Amira Hassan
  • Sofia Martin
  • Noah Dubois
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/search-toolbar
Copy command
View stories Registry JSON
Confirmation dialog
An accessible action confirmation with async progress, duplicate submission protection and retry after failure.
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/confirmation-dialog
Copy command
View stories Registry JSON
Data table
A generic TanStack Table with sorting, filtering, column visibility, pagination and optional row selection.
Amira Hassan
Sofia Martin

3 rows

Page 1 of 2
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/data-table
Copy command
View stories Registry JSON
Heading
A page or section heading with an optional description and action slot.

Families

Manage the families you support.

Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/heading
Copy command
View stories Registry JSON
Sortable data table
An optional controlled data table with mouse, touch and keyboard row reordering.
Reorder
Amira Hassan
Sofia Martin
Noah Dubois

3 rows

Page 1 of 1
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/sortable-data-table
Copy command
View stories Registry JSON

Design foundations

The Familis blue, a shared type system and consistent spacing across every product.

Headings
Manrope

Familiar by design.

font-heading
Body and interface
Inter

Clear interfaces for every family and their team.

font-sans
Editorial
Source Serif 4

Every family has a story.

font-serif
Code and commands
JetBrains Mono

const family = "Familis"

font-mono

Brand color and chart palette

Apply the brand to an existing project
In a project already using shadcn with Base UI, the style replaces the theme colors and fonts, and adds the Familis logo component.
Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/familis
Copy command
Logo Color Radius Typography Spacing Shadow Typeset

Phone input

Install with shadcn
pnpm dlx shadcn@latest add Familis-co/registry/input-phone
Copy command

UI components

Base UI primitives for your own compositions. Open a story to see its states and usage.

65 components

65 components available

React hooks

Reusable hooks for timing, interaction, navigation, and data tables. Open a story to try each hook.

9 hooks

9 hooks available