F1Carbon

ACCORDION

<Accordion>accordion.tsx
DEFAULT

Yes. It adheres to the WAI-ARIA design pattern.

MARKET

Markets remain on edge as President Trump's aggressive tariff policies stoke fears of stagflation.

ALERT (SONNER)

<AlertSonner>alert-sonner.tsx
LOCATION
COLOR
STYLE

AVATAR

<Avatar>avatar.tsx
SIZE VARIANTS
SMMDLGXL
STATUS INDICATORS
AC
Active
BY
Busy
DND
DND
IN
Inactive
AVATAR FACEPILE
A1
A2
A3
+2
FALLBACK STATES
JDABCD

BADGE

<Badge>badge.tsx
SIZE VARIANTS
XXS
XS
Small
Default
Large
XL
SHAPE VARIANTS
Default Shape
Pill Shape
Positive Pill
DEFAULT VARIANTS
Default
Outline
Filled
Strong
Positive
Negative
Warning
Brand
Positive
Negative
Warning
Brand
TAG VARIANTS
Tag
Tag Positive
Tag Negative
Tag Warning
Tag Brand
STATUS DOT VARIANTS
Online
Away
Offline
STATUS BADGE VARIANTS
Cancelled
Blocked
Idea
ToDo
Plan
In Progress
Alpha
Beta
LIVE
DONE

BROKER

<BrokerLogo> <BrokerStatus> <BrokerPile>broker-logo.tsx · broker-status.tsx · broker-status-pile.tsx

<BrokerLogo>

All Brokers

rh
ibkr
coin
etrade
td
schwab
fido
vanguard
webull
poly
kalshi
gemini
kraken
chase
JPM
wells
Fidelity Alt

Sizes

3xs
2xs
xs
sm
default
lg
xl
2xl
3xl

Shapes

Colors

rh
soft
broker
grey
prim
invrs

<BrokerStatus> + <BrokerPile>

Status Variants

BrokerPile

Surface Variants

card
hover
page
nav

Assembled Use Examples

Widget: Horiz, Details (Reveal Below)

2:44p EST
$2.6m
Buying Power
2:44p EST
$1.2m
Buying Power
2:44p EST
$420k
Buying Power
Re-Sync
Re-Sync
Data Issue

Widget: Horiz, Details (Tooltip)

Sidebar: Vert, Icon

Sidebar: Vert, Details

2:44p EST
$2.6m
Buying Power
2:44p EST
$420k
Buying Power
Re-Sync
Re-Sync
Data Issue

BUTTON

<Button>button.tsx
SIZES
STATES
CARD
MUTED / NAV
PAGE
BUTTON SPLIT
Action
$420
Buy
$188.50
Default
100
Brand
$310
Positive
+2.4%
Negative
-1.2%
Warning
!

CARD

<Card>card.tsx
STATIC
Default, no intxn
This is a static card that maintains its appearance.
HOVER
Hoverable, clickable
This card has hover interactions for better engagement.
MUTED / NAV
Nav, Widgets, Tooltips
This card uses muted colors for less visual emphasis.
CTA
Clickable, interactive
This card uses brand colors and hover effects to stand out.

CALENDAR

<CalendarFull>calendar-full.tsx
Calendar Base
May 2026
Calendar + Indicator
May 2026
Event List
TodayFriday, May 15
Sprint Planning
9:00 AM – 10:00 AM·Main Conference Room
Design Review
11:30 AM – 12:00 PM
Lunch with Alex
12:30 PM – 1:30 PM·Café Nero
Q1 Earnings Call
3:00 PM – 4:00 PM

Quarterly review of portfolio performance and market outlook

CHECKBOX

<Checkbox>checkbox.tsx
SIZES
COLORS
STATES
IN A LIST
WITH DESCRIPTION

By checking this box, you agree to our Terms of Service and Privacy Policy.

IN A CARD

Track user behavior and engagement.

CHIP

<Chip>chip.tsx

Variants

NeutralPositiveNegativeBrandWarningData 1Data 2Data 3CTAInactiveDisabled

Sizes

Small: smDefault: defaultLarge: lgXLarge: xlVertical: vert

ChipTicker

AAPLApple Inc
+1.25%
TSLATesla Inc
-2.10%
SPYS&P 500
+0.02%

COMPARE SLIDER

<CompareSlider>compare-slider.tsx

Reveal

Dark
Blur

Hide

Dark
Blur

DROPZONE

<Dropzone>dropzone.tsx
DEFAULT

Upload file

Drag and drop or to upload

Maximum file size: 10 MB

INPUT

<Input>input.tsx
CARD
MUTED / NAV
PAGE

MODAL

<Dialog> <Sheet>dialog.tsx / sheet.tsx
DIALOG
SHEET

RADIO

<RadioGroup>radio-group.tsx
SIZES
COLORS
STATES
WITH DESCRIPTION

Pay with your credit or debit card securely.

Pay with your PayPal account.

IN A CARD

For individual use

For teams & companies

RICH TEXT

.f1-richutilities.css
UNORDERED LIST — FLAT
  • Trim NVDA position by 20% at current levels
  • Add to AMZN on any pullback below $180
  • Hold AAPL — earnings catalyst in 2 weeks
  • Set stop-loss on TSLA at $165
UNORDERED LIST — 3-LEVEL NESTING
  • Level 1 — disc marker, 24px indent
    • Level 2 — circle marker, +20px indent
      • Level 3 — square marker, +20px indent
      • Another level 3 item
    • Another level 2 item
  • Back to level 1

Markers: disc → circle → square · All green (color-pos)

ORDERED LIST — FLAT
  1. Sell 200 shares of NVDA at market open
  2. Place limit buy for 50 AMZN at $178.50
  3. Review remaining positions by EOD Friday
ORDERED LIST — 3-LEVEL NESTING
  1. Level 1 — decimal (1, 2, 3)
    1. Level 2 — lower-alpha (a, b, c)
      1. Level 3 — lower-roman (i, ii, iii)
      2. Another level 3 item
    2. Another level 2 item
  2. Back to level 1

Types: decimal → lower-alpha → lower-roman · Indent matches bullets

MIXED NESTING — UL ↔ OL
  • Pre-earnings — preparation steps
    1. Review consensus estimates
    2. Check implied move from options
    3. Set alerts for key levels
  • Post-earnings — reaction framework
    1. Wait 15 minutes before trading
    2. Compare results to buy-side expectations
INLINE FORMATTING

Text with bold emphasis for key data points, italic for asides, and linked text for references. Inline code for tickers or API fields like avgCost.

BLOCK ELEMENTS

H3 Heading

Body text after h3.

H4 Heading

Body text after h4.

Blockquote with left accent border. Always uses prim color.
// Code block — mono font, base-weak bg
const portfolio = await fetch('/api/positions')
const data = await portfolio.json()

Content above hr.

Content below hr.

SEPARATOR

<Separator>separator.tsx
CARD
Muted / Nav
Page
VERTICAL ORIENTATION
weakalpha
weak
strong
brand
DOTLINE — ANIMATED CONNECTOR
default
pos
neg
brand

SWITCH

<Switch>switch.tsx
SIZES
sm
default
lg
xl
2xl
STYLES
Default
Brand
Positive
Neg-Pos
LABELS
CARD
NAV
PAGE

TOGGLE

<Toggle>toggle.tsx
TOGGLE GROUP
XS
Small
Default
Large
XL
STYLES
TABLE TOGGLE
CHART TOGGLE
Neutral
Positive
Negative

TOOLTIP

<Tooltip>tooltip.tsx
DIRECTION
SPECIALTY + RICH CONTENT
BackStyles
NextDataViz