fma-ds
86 components · 17 blocks · 23 themes

Accessible components for your shadcn project

A registry of react-aria components, blocks and themes in the shadcn/ui format. Copy them into your app with the CLI, then make them yours.

Get startedBrowse componentsTheme editor
pnpm dlx shadcn@latest add @fma-ds/button
Create an account
Enter your email below to create your account.

At least 8 characters.

Recent payments
OrderCustomerStatusAmount
INV-001Ana SouzaPaidR$ 250,00
INV-002Bruno LimaPendingR$ 150,00
INV-003Carla DiasFailedR$ 350,00
INV-004Diego AlvesPaidR$ 450,00
Badges
Every variant, then the sizes and the pill radius.
Solid
defaultsecondaryoutlineghostlinkinfosuccesswarningdestructiveinvertbrandmuted
Light
primary-lightwarning-lightsuccess-lightinfo-lightdestructive-lightinvert-lightbrand-light
Outline
primary-outlinewarning-outlinesuccess-outlineinfo-outlinedestructive-outlineinvert-outlinebrand-outlinemuted-outline
Dot
primary-dotsuccess-dotwarning-dotinfo-dotdestructive-dotmuted-dotsecondary-dotbrand-dot
Sizes & radius
xssmdefaultlgxlfullfullfull
Verify and leave a note

Refunds land on the original card within 5 days.

Notifications
Choose what we tell you about.
Product updates
Security alerts
Weekly digest
Navigation & toggles
Brand
The second identity color. Same as primary in most themes.
Create your first orderA brand surface: banners, promos.
Gradient borderFor promos and AI features.
AI is checking…
New
Chart colors
--chart-1 … --chart-5

Calendar, October 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
Buttons & overlays
Uploading64%
AS
BL
CD

Press ⌘ Z to undo an edit.

Shadows & radius
2xs
xs
sm
md
lg
xl
2xl
Tabs use muted for the list and background for the selected tab.

Features

  • Accessible by default

    Built on react-aria-components: keyboard, focus and screen reader behavior come for free.

  • shadcn CLI compatible

    Install with shadcn add @fma-ds/<name>. The code is copied into your project — it's yours.

  • Themeable

    Every token is a CSS variable. Pick a curated theme or build your own in the editor.

  • Tested in Storybook

    Each component ships with stories and interaction tests; they are the examples here too.

Browse the registry

BlocksStorybook