Getting started

silver-ui is a complete, themeable React component library, built with Panda CSS.

Key features

• 70+ accessible components. Keyboard navigation, focus rings, and ARIA wiring are built into interactive components.
• Flexible theming. Customize colors, radii, fonts, and more with CSS variables, including first-class light and dark modes.
• Zero-runtime styling. Panda CSS compiles type-safe styles into a small atomic stylesheet.
• Modern React support. Fully typed APIs are designed for React 19 and the React Compiler.
• Tree-shakeable imports. Import the full library or individual component subpaths, and bundlers can drop unused code.

Installation

npm

npm install silver-ui

pnpm

pnpm add silver-ui

yarn

yarn add silver-ui

silver-ui requires React 19+ as a peer dependency.

Usage

Import the stylesheet once in your app’s entry point, then use components:

import 'silver-ui/styles.css';
import {Button, Card, Heading, Text} from 'silver-ui';

function App() {
  return (
    <Card padding={4}>
      <Heading level={2}>Welcome back</Heading>
      <Text>Your project is ready to deploy.</Text>
      <Button
        label="Deploy"
        onClick={() => console.log('Deploying…')}
        size="md"
        variant="primary"
      />
    </Card>
  );
}

For smaller JS bundles, import component subpaths:

import 'silver-ui/styles.css';
import {Button} from 'silver-ui/Button';
import {SideNav, SideNavItem} from 'silver-ui/SideNav';

Next, browse the components or read the theming guide.