Accordion
Default
Bordered
Alert
Variants
You can add components to your app using the CLI.
This is an informational alert message.
Your changes have been saved successfully.
Please review your settings before proceeding.
Something went wrong. Please try again.
Without icon
This alert has no icon, just title and description.
Title only
Long content
Refer to the migration guide for detailed instructions. The API has been completely redesigned. All existing endpoints will be deprecated on March 31st. Please migrate your application to the new endpoints before the deadline.
Fit width (hug content)
Click to manage selection.
Rich content
Your app is live at production-abc123. Version is now serving traffic.
Avatar
Sizes & Fallback
Badge
Variants
Sizes
Card
Default Card
Basic card with subtle shadow
Card content goes here.
Elevated Card
Soft raised shadow
More prominent elevation.
Interactive Card
Hover to see floating effect
Cursor pointer, hover elevation.
Checkbox
Code
Inline code
Run npx softuq init to set up your project.
In context
Set data-theme="light" on <html> to enable light mode. All tokens use oklch() color space.
CodeBlock
# Install dependencies pnpm install # Start dev server pnpm dev
CodeBlock with JSX
import { Button } from "@/components/ui/button"; export default function Page() { return ( <Button variant="default">Click me</Button> ); }
CodeBlock without title
const greeting = "Hello, world!";
Dialog
Empty
No messages
You're all caught up. New messages will appear here.
Form Text
We'll never share your email with anyone.
Username is already taken.
Username is available!
Password is weak.
Input & Textarea
This is a help text below the input.
This field is required.
Username is available.
Content must be at least 10 characters.
Kbd
Sizes
Combos
Label
Pagination
Sizes
Few pages
Popover
Progress
Radio
Search
Standalone
Loading
Small
Shortcut
With tags
With whisper
Select
Separator
Content above
Content below
Sheet
Skeleton
Slider
Single
Range
Sizes
Disabled
Spinner
Sizes
With color
In context
Table
Tabs
Default
Account settings content.
Pills
All items.
Underline
Overview dashboard.
Tag
Variants
Dismissible
Sizes
Disabled
Toast
Variants
Title only
Long content (truncated)
Custom duration
Position
Toggle
With label
Receive push alerts on this device.
Toggle Group
Single (alignment)
Multiple (text style)
Outline variant
Sizes