@17sierra/ui

A flexible, themeable React UI component library built on Radix UI primitives and styled with Tailwind CSS.

Installation

npm install @17sierra/ui @17sierra/lib
# or
pnpm add @17sierra/ui @17sierra/lib

Peer Dependencies

This library uses optional peer dependencies for each component. Install only what you need:

# For Button - included by default
pnpm add @radix-ui/react-slot

# For Dialog
pnpm add @radix-ui/react-dialog

# For Form
pnpm add react-hook-form @hookform/resolvers

# See package.json peerDependencies for the full list

Usage

import { Button, Card, CardContent, CardHeader, CardTitle } from '@17sierra/ui';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default" size="sm">
          Click me
        </Button>
      </CardContent>
    </Card>
  );
}

Components

This library includes 34 components:

• Layout: Card, Separator, ScrollArea, Table
• Navigation: Tabs, Menubar, DropdownMenu
• Forms: Button, Input, Textarea, Checkbox, RadioGroup, Select, Slider, Switch, Label, Form
• Feedback: Alert, AlertDialog, Dialog, Sheet, Toast, Toaster, Tooltip, Popover, Progress, Skeleton
• Display: Avatar, Badge, Accordion, Collapsible, Calendar, Carousel, Chart

Styling

Components use CSS custom properties for theming. Import the base styles:

import '@17sierra/ui/globals.css';

Or create your own theme by defining the CSS variables.

Third-Party Licenses

See LICENSE-THIRD-PARTY.md for attribution of dependencies.

License

MIT