Remix 3 component library

RadCN brings shadcn-style components to Remix 3.

A web-first component library for server-rendered interfaces, native controls, and explicit browser behavior.

RADICAL WEB UI

--radcn-radius0.375rem--radcn-control-height2.25rem

First component

The docs render the library, not screenshots of it.

This first slice uses package imports from RadCN so the examples exercise the same component surface a Remix 3 app consumes.

Variants

Use the same Button component for actions, secondary choices, and link-style navigation.

Preview

Href Button

import { Button } from 'radcn/button'
import { Spinner } from 'radcn/spinner'

export function ButtonPreview() {
  return (
    <div class="button-preview">
      <Button>Deploy site</Button>
      <Button variant="secondary">Preview</Button>
      <Button variant="outline">View docs</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="link">Link</Button>
      <Button href="/docs/components/button">Href Button</Button>
      <Button size="sm" variant="outline">
        <svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16">
          <path d="M7 17 17 7" />
          <path d="M8 7h9v9" />
        </svg>
        New Branch
      </Button>
      <Button disabled size="sm" variant="outline">
        <Spinner ariaLabel="Submitting" />
        Submit
      </Button>
      <Button ariaLabel="Submit" size="icon" variant="outline">
        <svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16">
          <path d="M7 17 17 7" />
          <path d="M8 7h9v9" />
        </svg>
      </Button>
      <Button ariaLabel="Upload" class="radcn-fixture-rounded-button" size="icon" variant="outline">
        <svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16">
          <path d="M7 17 17 7" />
          <path d="M8 7h9v9" />
        </svg>
      </Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
      <Button ariaLabel="Submit small" size="icon-sm" variant="outline">^</Button>
      <Button ariaLabel="Submit large" size="icon-lg" variant="outline">^</Button>
    </div>
  )
}