Fnorcel
// reference

Components.

Every primitive in norcel, with live previews, copyable code, and the same tokens you'd use in your own project. Build your next site by mixing these into your pages exactly as you see them here.

// 27 components// 5 marketing// 5 foundations

Foundations

4 components

The design tokens that power every component. Override these and the entire system re-skins.

// colors

Colors

Semantic tokens — designed for dark interfaces. Override the CSS custom properties to re-skin.

ink
canvas
soft
soft-2
hairline
link
success
error
warning
violet
cyan
pink
tsx
// Tailwind utility class
<div className="bg-canvas text-ink">…</div>

// Raw CSS variable
color: var(--color-ink);
// typography

Typography

Geist + Geist Mono. Display sizes use negative tracking and the 600 weight ceiling.

Build and ship.
Inspired by the best.
The quick brown fox jumps over the lazy dog.
// mono · technical label
tsx
<h1 className="text-display-xl font-semibold tracking-[-0.05em]">
  Build and ship.
</h1>

<p className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/55">
  // technical label
</p>
// spacing

Spacing

Base unit 4px. The brand scale: xxs 4 · xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 40 · 3xl 48 · 4xl 64 · 5xl 96.

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
2xl · 40px
3xl · 48px
4xl · 64px
tsx
<div className="flex gap-md p-lg">
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
</div>
// shadows

Shadows

5-level stacked shadow ladder. Inset ring + 1–2 dark drops. Never a single heavy drop.

s-1
s-2
s-3
s-4
s-5
tsx
<div className="rounded-xl bg-white/[0.02] shadow-level-1">
  Standard card
</div>

<div className="rounded-xl bg-ink shadow-level-5">
  Featured card
</div>

Marketing

6 components

Drop-in sections for your marketing site. Mix and match to build any landing page.

// code-window

CodeWindow

A faithful recreation of VS Code on macOS — title bar, tabs, breadcrumb, line numbers, status bar.

theme.ts — norcel
theme.ts
globals.css
norcelsrctheme.ts
1// theme tokens2export const theme
main+0 −0
TypeScriptLn 1, Col 1Spaces: 2UTF-8
tsx
<CodeWindow
  title="theme.ts — norcel"
  tabs={[
    { label: "theme.ts", active: true },
    { label: "globals.css" },
  ]}
  breadcrumbs={["norcel", "src", "theme.ts"]}
>
  <CodeLines>
    <CodeLine n={1}>
      <span className="tk-comment">{"// theme tokens"}</span>
    </CodeLine>
  </CodeLines>
</CodeWindow>
// reveal

Reveal

IntersectionObserver-powered scroll reveal. Wraps content in opacity + 16 px translate, with stagger delays.

I'm a Reveal block — scroll to me to see the animation.
tsx
<Reveal delay={2}>
  <div className="rounded-lg border border-white/[0.08] bg-white/[0.02] p-6">
    I fade in when you scroll me into view.
  </div>
</Reveal>
// surface-mockup

SurfaceMockup

Real-looking miniature UI for a given surface. Variants: browser, phone, desktop, window.

norcel.dev

// marketing

Ship a beautiful site.

Get startedLearn more
9:415G

Welcome back.

you@company.com
••••••••
Sign in
or continue with
GoogleGitHub
Home
Projects
Team
Analytics
12.4K
Users
$8.2K
Revenue
42ms
Latency
Requests / 30d
dashboard-v2live
marketing-sitewarn
edge-apilive
⌘Search anything…
  • Toggle theme⌘D
  • New project⌘N
  • Search docs⌘/
  • Invite teammate⌘I
tsx
<SurfaceMockup variant="browser" className="aspect-[16/10]" />
<SurfaceMockup variant="phone" className="aspect-[3/4]" />
<SurfaceMockup variant="desktop" className="aspect-[16/10]" />
<SurfaceMockup variant="window" className="aspect-[16/10]" />
// surface-switcher

SurfaceSwitcher

Interactive tabbed mockup picker. Each item is a real SurfaceMockup + feature list.

Home
Projects
Team
Analytics
12.4K
Users
$8.2K
Revenue
42ms
Latency
Requests / 30d
dashboard-v2live
marketing-sitewarn
edge-apilive
src/app/dashboard/page.tsx

// dashboard

Dashboard.

Real-time metrics, charts, and tables — rendered with the same primitives as the marketing site.

  • Sidebar with active-row indicator
  • Stat cards with trend deltas
  • Area chart with brand gradient
  • Searchable, filterable data table
tsx
<SurfaceSwitcher
  defaultId="dashboard"
  items={[
    {
      id: "dashboard",
      label: "Dashboard",
      description: "...",
      features: ["Sidebar", "Charts", "Tables"],
      variant: "desktop",
      hint: "src/app/dashboard/page.tsx",
    },
    // ...
  ]}
/>
// developer-experience

DeveloperExperience

2-column section: copy + checklist on the left, live VS Code preview on the right.

// developer experience

Built for the people who build.

Every component is a Server Component by default. Every API is fully typed. Every decision is documented.

  • Server Components by default
    Zero client JS until you opt in.
  • Fully typed props
    Strict TS, exported variants, IntelliSense.
  • Tree-shakeable
    Import only what you ship.
  • Zero runtime deps
    Built on Radix + CVA, that's it.
Explore componentsRead the docs →
button.tsx — norcel
button.tsx
card.tsx
input.tsx
norcelsrccomponentsuibutton.tsx
1import { Button, buttonVariants } from "@/components/ui/button";2import { cn } from "@/lib/utils";3 4export function PrimaryButton() {5  return (6    <Button7      variant="primary"8      size="lg"9      shape="pill"10      className={cn("shadow-level-1")}11      onClick={handleClick}12    >13      Get started14    </Button>15  )16}
main+0 −0
TypeScriptLn 1, Col 1Spaces: 2UTF-8
tsx
<DeveloperExperience />
// hero

Hero

Top-of-page pitch with eyebrow + headline + CTAs + trust strip + stat grid.

See / for the live demo.
tsx
<Hero
  eyebrow={<span>// v2.0 — Live</span>}
  title="Build and ship on a premium design system."
  subtitle="..."
  primaryCta={{ label: "Get started", href: "/components" }}
  secondaryCta={{ label: "View components", href: "/components" }}
>
  {/* stat grid, code preview, etc. */}
</Hero>

Primitives

11 components

The building blocks. Buttons, inputs, cards, badges, avatars.

// button

Button

Two pill scales: 100 px marketing and 6 px nav. Polarized in dark mode (white pill = primary).

  • primary = white pill (polarity flip)
  • secondary = white/5 with white/10 ring
  • hover lifts to white/8
tsx
<Button variant="primary" size="lg" shape="pill">
  Get started
  <ArrowRight className="h-4 w-4" />
</Button>

<Button variant="secondary" shape="pill">
  View components
</Button>

<Button variant="ghost" shape="pill">Cancel</Button>
<Button variant="destructive">Delete</Button>
// input

Input

Dark-first chrome: bg-white/[0.04] border-white/[0.08] with focus:ring-2 focus:ring-white/20.

tsx
<Input placeholder="you@company.com" prefix={<Mail />} />
<Input type="password" placeholder="••••••••" />
<Input invalid defaultValue="bad value" />
// textarea

Textarea

Same dark-first chrome as Input, multi-line.

tsx
<Textarea placeholder="Tell us what you're working on..." rows={4} />
// label

Label

The canonical text label that pairs with every form control.

tsx
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="you@company.com" />
// card

Card

DNA: white-tint surface + hairline border + stacked shadow + hover transition. Polarized 'featured' variant for highlights.

Default

White/[0.02] + hairline + shadow

Hover lifts to white/[0.04].

Featured

Polarity-flip surface.
tsx
<Card variant="default">
  <CardHeader>
    <CardTitle>Default card</CardTitle>
    <CardDescription>White-tint surface with hairline.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

<Card variant="featured">
  <CardHeader>
    <CardTitle>Featured card</CardTitle>
  </CardHeader>
</Card>
// badge

Badge

Eyebrow pill, status tag (mono caps), and section eyebrow variants.

DefaultPrimarySuccessbestfree

/ the design language

tsx
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<StatusTag tone="emerald">best</StatusTag>
<StatusTag tone="amber">free</StatusTag>
<Eyebrow>the design language</Eyebrow>
// icon-container

IconContainer

The canonical 36×36 icon square with three tones: neutral, amber, ink.

tsx
<IconContainer>
  <Sparkles className="h-4 w-4" />
</IconContainer>

<IconContainer tone="amber">
  <Sparkles className="h-4 w-4" />
</IconContainer>
// avatar

Avatar

Circular image with fallback initials.

SCMKPP
tsx
<Avatar>
  <AvatarImage src="…" alt="…" />
  <AvatarFallback>SC</AvatarFallback>
</Avatar>
// separator

Separator

A 1px hairline divider. Use to break up sections without adding visual weight.

Above
Below
tsx
<Separator />
// kbd

Kbd

Inline keyboard shortcut chip. Mono caps, hairline border.

Press ⌘ K to open the command palette.

tsx
<p>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.</p>
// skeleton

Skeleton

Shimmer-loading placeholder. Use to indicate content is being fetched.

tsx
<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Forms

5 components

Selection + input controls for every form pattern.

// checkbox

Checkbox

Polarity-flipped on dark. Hover lifts the border to white/14.

tsx
<Checkbox id="agree" defaultChecked />
<Label htmlFor="agree">I agree to the terms</Label>
// radio-group

RadioGroup

Single-select with custom card-style options.

tsx
<RadioGroup defaultValue="comfortable">
  <Label>Spacing</Label>
  <RadioGroupItem value="default" id="default" />
  <RadioGroupItem value="comfortable" id="comfortable" />
  <RadioGroupItem value="compact" id="compact" />
</RadioGroup>
// switch

Switch

iOS-style toggle. White on dark when active.

Marketing emails
Receive emails about this topic.
Security alerts
Receive emails about this topic.
Product updates
Receive emails about this topic.
tsx
<Switch defaultChecked />
<Switch />
// select

Select

Native-feeling select with our dark chrome.

tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>
// slider

Slider

Range input with white thumb and dark track.

tsx
<Slider defaultValue={[75]} max={100} step={1} />

Overlays

8 components

Modals, menus, popovers, tooltips — the floating layer.

// alert

Alert

Semantic feedback with five tones (default, info, success, warning, error).

tsx
<Alert variant="info">
  <Info className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>This is an info alert.</AlertDescription>
</Alert>
// dialog

Dialog

Modal surface with the Level 5 shadow + backdrop blur.

tsx
<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>Make changes to your profile.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
// popover

Popover

Floating content panel anchored to a trigger.

tsx
<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    <h4 className="text-sm font-semibold">Dimensions</h4>
    <p className="text-sm text-white/65">Set the dimensions for the panel.</p>
  </PopoverContent>
</Popover>
// tooltip

Tooltip

Hover-revealed micro-content. Wraps any trigger.

tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="secondary">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>Helpful tip</TooltipContent>
</Tooltip>
// sheet

Sheet

Side-anchored drawer panel.

Side-anchored overlay. See Sheet docs.
tsx
import { Sheet, SheetContent, … } from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right">…</SheetContent>
</Sheet>
// drawer

Drawer

Bottom-anchored sheet for mobile-first flows.

Bottom-anchored sheet. See Drawer docs.
tsx
import { Drawer, … } from "@/components/ui/drawer"
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>…</DrawerContent>
</Drawer>
// command

Command

⌘K command palette — search any component / page / action.

  • Press ⌘K to open
tsx
<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command…" />
  <CommandList>
    <CommandGroup heading="Suggestions">
      <CommandItem>New project</CommandItem>
      <CommandItem>Search docs</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Layout

7 components

Structural components for composing pages.

// tabs

Tabs

Segmented content switcher with an active pill.

Overview content.
tsx
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
</Tabs>
// accordion

Accordion

Vertically stacked, mutually exclusive content panels.

tsx
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Question?</AccordionTrigger>
    <AccordionContent>Answer.</AccordionContent>
  </AccordionItem>
</Accordion>
// collapsible

Collapsible

Single panel that expands/collapses. Lower-level than Accordion.

See Collapsible docs for the full pattern.
tsx
<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content</CollapsibleContent>
</Collapsible>
// pagination

Pagination

Numbered page navigation with prev/next.

tsx
<Pagination>
  <PaginationContent>
    <PaginationPrevious />
    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
    <PaginationNext />
  </PaginationContent>
</Pagination>
// table

Table

Data table with mono-caps headers and dividers.

NameStatusRole
Sarah ChenactiveAdmin
Marcus KimactiveMember
Priya PatelpendingMember
tsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Jane</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>
// scroll-area

ScrollArea

Custom scrollbar wrapper. Use inside dropdowns, sidebars, modals.

Custom-styled scroll container. See ScrollArea docs.
tsx
<ScrollArea className="h-48 w-48 rounded-md border">
  <div className="p-4">…long content…</div>
</ScrollArea>

Feedback

2 components

Toasts, progress bars, and other status indicators.

// toast

Toast

Sonner-powered. Stacks bottom-right. Auto-dismisses.

tsx
import { toast } from "@/components/ui/sonner"
toast.success("Saved!")
toast.error("Something went wrong.")
toast.info("New version available.")
// progress

Progress

Horizontal progress bar with white fill on dark.

Uploading…65%
Complete100%
tsx
<Progress value={65} />
// you have everything you need

Build something like this.

Every section on the marketing site — the hero, the surface switcher, the developer experience, the pricing, the FAQ, the testimonials, the CTA, the logo cloud, the code window — is a component you can copy into your own app. Same tokens, same primitives, same look.

Read the 5-min quickstartSee the home page