Socket

The component gallery

Every component the registry serves, rendered from the same source shadcn add delivers. There is no copy here to fall out of date.

43 components43 with a preview

Getting set up

Four steps, once per project. Any folder with a package manager and a build step (Vite, Next, Astro) qualifies, git or no git.

1. Install the tokens
```
pnpm add @cloudgrid-io/ui
```

2. Import the CSS, in this order

@import "tailwindcss";
@import "@cloudgrid-io/ui/fonts.css";
@import "@cloudgrid-io/ui/tokens.css";
@import "@cloudgrid-io/ui/theme.css";
@import "@cloudgrid-io/ui/shadcn.css";

3. Point at the registry

// components.json
{ "registries": { "@cloudgrid": "https://ui.cloudgrid.io/r/{name}.json" } }

4. Pull what you need
```
npx shadcn add @cloudgrid/button
```

If something does not workshow

Step 1 404s: The package is not missing. It is private on npmjs, and npm answers an unauthorised read of a private package with 404 rather than 401, so no access looks exactly like no package. Run npm login with an account that belongs to the CloudGrid npm organisation. In CI, use a granular read-only token for @cloudgrid-io/ui, kept in the build environment rather than committed. One thing NOT to do: add an .npmrc scope line pointing @cloudgrid-io at another registry. The package lives on plain npmjs, where the public @cloudgrid-io packages already resolve.
The page renders unstyled: The import order in step 2 is load-bearing and getting it wrong fails silently. theme.css maps utilities onto the tokens, so before tokens.css has run there is nothing to map.
Components come out grey: shadcn.css must come after whatever :root your own shadcn setup wrote, or the stock palette wins. Skip that line entirely if you are not using shadcn.
More arrived than you asked for: Anything listed under a component as pulls in comes with it. The exact command for each is beside its name below.
The registry URL changed: It is provisional: an entity address rather than a custom domain, so the suffix moves if the registry is ever recreated.

No build step? Just link the brand

For a single HTML file you open in a browser: a prototype, a sketch, a CodePen. This gets you every colour, space, radius, shadow and type size as a custom property, plus the real fonts. Components cannot travel this way, because they are TSX and need compiling; the brand can, because it is only CSS.

<link rel="stylesheet" href="https://ui.cloudgrid.io/brand/fonts.css">
<link rel="stylesheet" href="https://ui.cloudgrid.io/brand/tokens.css">

<h1 style="font-family: var(--cg-font-display); color: var(--cg-primary)">
  Plugged
</h1>

No Tailwind utilities this way: theme.css needs a build step, so it is deliberately not served here rather than served and silently doing nothing. Use var(--cg-*) directly. Surfaces still work, so data-cg-surface="panel" on a container flips everything inside it.

What you own afterwards

The source, entirely. Edit it, delete parts of it, restyle it. Nothing here can push a change into your repo, and running shadcn add again overwrites your edits, so a component you have customised is yours to maintain from then on. That is the trade the registry makes: no version coupling across repos, at the cost of no automatic updates.

Two @cloudgrid strings that are not the same thing: @cloudgrid-io/ui is a real npm package, and @cloudgrid/button is a registry alias you map above. Renaming one does not rename the other.

badge

npx shadcn add @cloudgrid/badge

npm: @base-ui/react, class-variance-authority

LiveInspirationRuntime

button

npx shadcn add @cloudgrid/button

npm: @base-ui/react, class-variance-authority

card

npx shadcn add @cloudgrid/card

orbit-deck

Picked up 12 times

Plugged from a repo, live in seconds.

checkbox

npx shadcn add @cloudgrid/checkbox

npm: @base-ui/react, lucide-react

Keep it unlisted

code-block

npx shadcn add @cloudgrid/code-block

pulls in @cloudgrid/button. npm: lucide-react

npx shadcn add @cloudgrid/button
npx shadcn add @cloudgrid/dialog

combobox

npx shadcn add @cloudgrid/combobox

pulls in @cloudgrid/button, @cloudgrid/input-group. npm: @base-ui/react, lucide-react

dialog

npx shadcn add @cloudgrid/dialog

pulls in @cloudgrid/button. npm: @base-ui/react, lucide-react

drop-zone

npx shadcn add @cloudgrid/drop-zone

npm: lucide-react

Drop a folder or a zipWe figure out the rest.

Drag it here, or click to choose

States

That did not landA zip, a tar, or a folder.

Try again

invalid

Drop a folder or a zipWe figure out the rest.

Not yet

disabled

input

npx shadcn add @cloudgrid/input

npm: @base-ui/react

input-group

npx shadcn add @cloudgrid/input-group

pulls in @cloudgrid/button, @cloudgrid/input, @cloudgrid/textarea. npm: class-variance-authority

grid/

number-field

npx shadcn add @cloudgrid/number-field

npm: @base-ui/react, lucide-react

select

npx shadcn add @cloudgrid/select

npm: @base-ui/react, lucide-react

skeleton

npx shadcn add @cloudgrid/skeleton

sonner

npx shadcn add @cloudgrid/sonner

npm: lucide-react, sonner

A toaster, mounted once per app. Rendered on the registry preview rather than here, because a toast that fires on page load is noise in a catalogue.

switch

npx shadcn add @cloudgrid/switch

npm: @base-ui/react

Unlisted

table

npx shadcn add @cloudgrid/table

Name	Kind	Picked up
orbit-deck	Inspiration	12
signal-room	Runtime	3

tabs

npx shadcn add @cloudgrid/tabs

npm: @base-ui/react, class-variance-authority

Things people picked up.

textarea

npx shadcn add @cloudgrid/textarea

separator

npx shadcn add @cloudgrid/separator

npm: @base-ui/react

Above

Below

accordion

npx shadcn add @cloudgrid/accordion

npm: @base-ui/react, lucide-react, tw-animate-css

quote

npx shadcn add @cloudgrid/quote

The registry ships source, not a package.

ui-setup-guide.md

step-item

npx shadcn add @cloudgrid/step-item

Plug it
One command. The grid hands back a URL.
It goes live
No further step.

page-heading

npx shadcn add @cloudgrid/page-heading

The registry

Every component, one place

Pulled with shadcn add, owned by you after.

panel

npx shadcn add @cloudgrid/panel

The purple panel: the system's one dramatic move.

logo

npx shadcn add @cloudgrid/logo

card-grid

npx shadcn add @cloudgrid/card-grid

pulls in @cloudgrid/card.

Plug it

One command from the repo you already have.

It goes live

The URL serves the moment the build lands.

Pick it up

Anyone with the link makes it theirs.

option-card

npx shadcn add @cloudgrid/option-card

Start from an inspirationPick something already on the grid.Live in seconds Start from your repoPlug what you already have.

stage-panel

npx shadcn add @cloudgrid/stage-panel

pulls in @cloudgrid/panel.

The purple stage, with its own texture.

feature-cells

npx shadcn add @cloudgrid/feature-cells

npm: lucide-react

What is on the grid
Static JSON, one file per component.
How a consumer picks it up
One namespace, then shadcn add.

carousel

npx shadcn add @cloudgrid/carousel

The registry

Live on a URL

rich-text

npx shadcn add @cloudgrid/rich-text

What prose is for

HTML the component did not write, so .prose styles the elements.

Lists, on the measure

pricing-tier-cards

npx shadcn add @cloudgrid/pricing-tier-cards

pulls in @cloudgrid/button. npm: lucide-react

Solo

One person, one grid

Freewhile the First Hundred are being seated

Everything needed to plug a thing and keep it live.

Unlimited inspirations
One runtime
Picked up by anyone with the link

Plug it

Studio

A team sharing one grid

$24per person, per month

Shared inspirations, and a grid the whole team reads from.

Everything in Solo
Shared runtimes
Roles on the grid

Plug it

pricing-tiers

npx shadcn add @cloudgrid/pricing-tiers

pulls in @cloudgrid/pricing-tier-cards.

While the First Hundred are being seated

Solo

One person, one grid

Freewhile the First Hundred are being seated

Everything needed to plug a thing and keep it live.

Unlimited inspirations
One runtime
Picked up by anyone with the link

Plug it

Studio

A team sharing one grid

$24per person, per month

Shared inspirations, and a grid the whole team reads from.

Everything in Solo
Shared runtimes
Roles on the grid

Plug it

agent-prompt

npx shadcn add @cloudgrid/agent-prompt

Working with an agent? One line:

npx shadcn add @cloudgrid/button

compare-table

npx shadcn add @cloudgrid/compare-table

pulls in @cloudgrid/logo. npm: lucide-react

	A build pipeline you maintain
Plugs from the repo you already have	Included	Included
Live URL with no second step	Not included	Included
Makes you write a build config first	Not included	Not included

creation-tile

npx shadcn add @cloudgrid/creation-tile

Open it: orbit-deck Pick it up: orbit-deckpicked uporbit-deck

hub-index

npx shadcn add @cloudgrid/hub-index

pulls in @cloudgrid/page-heading.

Everything on the grid

Inspirations and runtimes, grouped by what they are for.

Live now

Plugged and serving.

Orbit Deck
Signal Room

tool-logo

npx shadcn add @cloudgrid/tool-logo

The renderer. Marks come from the caller.

tool-marks

npx shadcn add @cloudgrid/tool-marks

ClaudeClaude CodeAnthropicCursorGitHub CopilotWindsurfReplitv0VercelNetlifyRenderGoogle GeminiOpenAIChatGPTCodexLovableBoltBase44Antigravity

plug-method

npx shadcn add @cloudgrid/plug-method

pulls in @cloudgrid/tool-logo.

One command from the repo you already have.

# run it from the repo you already have

npx @cloudgrid-io/cli plug

# what happens next

It builds on the gridNo config first.
It goes liveThe URL serves the moment the build lands.

Works from any of these

Claude
Cursor

npx installs nothing globally.

Getting set up

badge

button

card

checkbox

code-block

combobox

dialog

dropdown-menu

drop-zone

input

input-group

number-field

select

skeleton

sonner

switch

table

tabs

textarea

tooltip

separator

accordion

What is on the grid

How a consumer picks it up

quote

step-item

page-heading

cta-banner

panel

logo

card-grid

option-card

stage-panel

feature-cells

carousel

rich-text

What prose is for

pricing-tier-cards

pricing-tiers

While the First Hundred are being seated

agent-prompt

compare-table

creation-tile

hub-index

Live now

tool-logo

tool-marks

plug-method