Skip to content
SevenUI
Sign in

Base UI components for shadcn/ui

Copy it. Own it. Ship it.

65 accessible React primitives built on Base UI, composed into 905 free components and 119 Pro Blocks. The shadcn CLI copies the source into your repo.

npx shadcn@latest add @sevenui/buttonpnpm dlx shadcn@latest add @sevenui/buttonyarn dlx shadcn@latest add @sevenui/buttonbunx --bun shadcn@latest add @sevenui/button
Get started
119 Pro Blocks, $99 once

One registry, three sizes.

Follow one switch outward. On its own it is a Primitive. Inside a card it is part of a Component. In a finished account page it is part of a Pro Block. The code is the same at every size.

Public profileChoose what people outside your team see.
  • Product designer at Northwind
  • Lisbon, Portugal
  • ava.moreno@northwind.app
  • +351 912 408 331
  • Only your name and photo are public.
  1. Primitive · free, MIT

    Primitive: the switch

    One file, switch.tsx. Base UI keeps the behavior: the switch role, focus and keyboard. You keep the markup and the styles, on the shadcn/ui variables you already have. Flip the Email switch; it stays live all the way out.

    npx shadcn@latest add @sevenui/switchpnpm dlx shadcn@latest add @sevenui/switchyarn dlx shadcn@latest add @sevenui/switchbunx --bun shadcn@latest add @sevenui/switch
    Browse all 65 primitives
  2. Component · free

    Component: the public profile card

    Card, Avatar, Label and Switch, composed into a card that decides what a public profile shows. If you turned Email on, it is in the preview now. Copy the component and change it however you like.

    npx shadcn@latest add @sevenui/component/switch-12pnpm dlx shadcn@latest add @sevenui/component/switch-12yarn dlx shadcn@latest add @sevenui/component/switch-12bunx --bun shadcn@latest add @sevenui/component/switch-12
    Browse 905 free components
  3. Block · Pro

    Block: the account page

    The same card inside a finished page, with navigation, profile, sessions and a danger zone. 119 Pro Blocks across 20 categories, installed with the same CLI as the switch.

    npx shadcn@latest add @sevenui/pro/account-02pnpm dlx shadcn@latest add @sevenui/pro/account-02yarn dlx shadcn@latest add @sevenui/pro/account-02bunx --bun shadcn@latest add @sevenui/pro/account-02
    Preview the real account blockSee all 119 Pro BlocksGet Pro for $99, once

Same command at every size.

A switch, a card, or a whole page. Each one arrives through the shadcn CLI as source in your repo, styled by the theme you already have.

  • Primitive65 · free, MIT
    npx shadcn@latest add @sevenui/switchpnpm dlx shadcn@latest add @sevenui/switchyarn dlx shadcn@latest add @sevenui/switchbunx --bun shadcn@latest add @sevenui/switch
    Switch docs
  • Component905 · free
    npx shadcn@latest add @sevenui/component/switch-12pnpm dlx shadcn@latest add @sevenui/component/switch-12yarn dlx shadcn@latest add @sevenui/component/switch-12bunx --bun shadcn@latest add @sevenui/component/switch-12
    Browse components
  • Block119 · Pro
    npx shadcn@latest add @sevenui/pro/account-02pnpm dlx shadcn@latest add @sevenui/pro/account-02yarn dlx shadcn@latest add @sevenui/pro/account-02bunx --bun shadcn@latest add @sevenui/pro/account-02
    Browse Blocks

Start at any size.