Components
UIX builds components from your tokens, so they change when your colors, fonts or corners change.
74 components in 7 groups
The Figma plugin builds these as real component sets, with variants and properties, bound to your tokens.
| Group | Components |
|---|---|
| Actions (4) | Button, Icon Button, Button Group, Link |
| Forms (19) | Input, Select, Textarea, Checkbox, Radio, Switch, Slider, Segmented Control, Chip, File Upload, Rating, Search Field, Number Input, OTP Input, Combobox, Tag Input, Toggle and toggle group, Selection Card, Date Picker |
| Navigation (10) | Tabs and tab bar, Breadcrumb, Pagination, Navbar, Sidebar Item and sidebar, Step and stepper, Menu Item and dropdown, Bottom Navigation, Tree Item and tree, Footer |
| Feedback (11) | Alert, Banner, Toast, Tooltip, Progress, Progress Circle, Spinner, Skeleton, Empty State, Notification, Cookie Banner |
| Data display (15) | Badge, Avatar, Avatar Group, Card, Stat, List Item, Table Row and table, Accordion, Divider, Kbd, Timeline and feed, Description List, Code Block, Quote, Chart |
| Overlays (5) | Modal, Popover, Drawer, Bottom Sheet, Command Palette |
| Marketing (10) | Hero, Feature, Pricing Card, Testimonial, CTA Section, Logo Cloud, Newsletter, Blog Card, Team Member, Contact Form |
You choose which components to build, and which variants of each. Only those are made.
Shapes
Every component comes in Sharp, Rounded or Pill. Pick one and the whole library is drawn in it. Pick more than one and each set gets a Shape variant. Corners stay bound to your radius tokens, and nested components follow the shape: the buttons in a card match the card.
Visual styles
The same components can be built in 10 visual styles: Modern, Minimal, Glassmorphism, Neumorphism, Neo-brutalism, Gradient, Claymorphism, Skeuomorphic, Neon and Material tonal. Each style sits on top of the same token bindings, so a color change or dark mode still works.
Variants
- Buttons and icon buttons: Primary, Secondary, Soft, Outline, Ghost and Destructive, plus Link.
- Fields: Outline, Filled and Underline.
- Alerts: Subtle, Accent, Solid and Outline.
- Toasts: Light and Dark.
Components also have sizes and states, and right-to-left versions if you need them.
Free and Pro
- Free: 12 core components (Button, Icon Button, Input, Select, Checkbox, Radio, Switch, Badge, Avatar, Card, Alert, Tabs) in the Modern style, in all 3 shapes, with RTL.
- Pro: all 74 components in all 10 styles, plus page templates made from them: sign in, sign up, dashboard, settings, pricing, landing, profile and 404, with mobile versions.
Components in code
- React export: shadcn-style React for all 74 components, from code export. This format is Pro. See Code export.
- Your AI agent: the MCP tool
get_componentreturns one component in your system’s tokens. Free accounts get the 12 core components; Pro gets all of them. See MCP server. - CLI and shadcn:
npx uix-ui pulland the shadcn registry install the components of uix-ui, our open-source React library, in your colors. See shadcn registry.
npx uix-ui@latest pull <id> button cardA tour with pictures is on the Generator page.