@defied/prism-cli

@defied/prism-cli

Add accessible React and Vue components to your project as source code you own. Each component is generated from one design-token recipe into Tailwind CSS, CSS Modules or plain CSS, and every framework target passes the same contract tests.

Quick start

# 1. Create prism.json (React is the default)
npx @defied/prism-cli init                    # or: init --framework vue

# 2. Install the runtime the generated components import
npm install @defied/prism-tokens @defied/prism-core @defied/prism-react   # or @defied/prism-vue

# 3. Add components
npx prism add button
npx prism add dialog

Load the design tokens once, in your global stylesheet:

@import "tailwindcss";                        /* Tailwind styling only */
@import "@defied/prism-tokens/tokens.css";
@import "@defied/prism-tokens/tailwind.css";  /* Tailwind styling only, after tailwindcss */

Components are written to src/components/ui by default. Edit them freely; they are yours.

Commands

add and sync also take --registry <path|url> to install from a registry other than the one bundled with the CLI.

Components

Alert, Avatar, Badge, Box, Breadcrumb, Button, Calendar, Card, Checkbox, Code, Combobox, Command Palette, Container, Data Table, Dialog, Divider, Drawer, Dropdown Menu, Empty State, Field, Form, Grid, Heading, Icon Button, Inline, Input, Label, Link, Pagination, Popover, Progress, Radio Group, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Table, Tabs, Text, Textarea, Toast, Tooltip and Visually Hidden, for both React (18+) and Vue (3.4+).

Requirements

Node.js 20 or later.

License

MIT