Welcome to SomaUI 🚀

SomaUI is a ShadCN-inspired version of RizzUI, built with modern web development in mind. It’s a fully TypeScript + React 19 UI library powered by TailwindCSS v4, designed to help you build beautiful and responsive interfaces quickly.

Installation

You can use SomaUI in two ways:

1. Via CLI (recommended) – generate projects and components with ease.
2. As a package – import components directly from @somaui/ui.

CLI Usage

SomaUI comes with a handy CLI to generate components and scaffold projects.

npm

npx @somaui/cli init

yarn

yarn dlx @somaui/cli init

pnpm

pnpm dlx somaui init

bun

bun @somaui/cli init

This will setup a custom styles/global.css, lib,icons,components folder. The CLI ensures that your components follow the SomaUI standards and makes setup effortless.

Next proceed to add your components.

npm

npx @somaui/cli add button

yarn

yarn dlx @somaui/cli add button

pnpm

pnpm dlx @somaui/cli add button

bun

bunx @somaui/cli add button

This will copy a ready to use button/index.tsx in your component folder . Sometimes, a component imports other components. In such cases, the dependent component will also be created. If a component or folder already exists, the component will be skipped unless the --overwrite flag is used.

npm

npx @somaui/cli add button input select

yarn

yarn dlx @somaui/cli add button input select

pnpm

pnpm dlx @somaui/cli add button input select

bun

bunx @somaui/cli add button input select

This will copy a ready to use button/index.tsx, input/index.tsx, select/index.tsx in your component folder

Use the all flag to get all components

npm

npx @somaui/cli add --all

yarn

yarn dlx @somaui/cli add --all

pnpm

pnpm dlx @somaui/cli add --all

bun

bunx @somaui/cli add --all

See full list of components:

npm

//Basic UI Components
npx @somaui/cli add button
npx @somaui/cli add input
npx @somaui/cli add select
npx @somaui/cli add checkbox
npx @somaui/cli add radio
npx @somaui/cli add textarea
npx @somaui/cli add switch
npx @somaui/cli add password
npx @somaui/cli add pin-code
npx @somaui/cli add multi-select

//Form Components
npx @somaui/cli add checkbox-group
npx @somaui/cli add radio-group
npx @somaui/cli add field-clear-button
npx @somaui/cli add field-error-text
npx @somaui/cli add field-helper-text

//Feedback & Overlay Components
npx @somaui/cli add alert
npx @somaui/cli add modal
npx @somaui/cli add drawer
npx @somaui/cli add tooltip
npx @somaui/cli add popover
npx @somaui/cli add progressbar
npx @somaui/cli add radial-progressbar
npx @somaui/cli add loader
npx @somaui/cli add announcement

//Layout Components
npx @somaui/cli add box
npx @somaui/cli add flex
npx @somaui/cli add grid
npx @somaui/cli add collapse
npx @somaui/cli add accordion
npx @somaui/cli add tabs
npx @somaui/cli add stepper
npx @somaui/cli add table

//Data Display Components
npx @somaui/cli add avatar
npx @somaui/cli add badge
npx @somaui/cli add empty
npx @somaui/cli add dropdown
npx @somaui/cli add upload
npx @somaui/cli add action-icon

//Advanced Components
npx @somaui/cli add advanced-checkbox
npx @somaui/cli add advanced-radio
npx @somaui/cli add highlight
npx @somaui/cli add file-input
npx @somaui/cli add upload-zone

//Typography Components
npx @somaui/cli add typography
npx @somaui/cli add title
npx @somaui/cli add text
npx @somaui/cli add code
npx @somaui/cli add blockquote
npx @somaui/cli add italic
npx @somaui/cli add bold

//Utility Components
npx @somaui/cli add cn
npx @somaui/cli add use-collapse

yarn

  //Basic UI Components
yarn dlx @somaui/cli add button
yarn dlx @somaui/cli add input
yarn dlx @somaui/cli add select
yarn dlx @somaui/cli add checkbox
yarn dlx @somaui/cli add radio
yarn dlx @somaui/cli add textarea
yarn dlx @somaui/cli add switch
yarn dlx @somaui/cli add password
yarn dlx @somaui/cli add pin-code
yarn dlx @somaui/cli add multi-select

//Form Components
yarn dlx @somaui/cli add checkbox-group
yarn dlx @somaui/cli add radio-group
yarn dlx @somaui/cli add field-clear-button
yarn dlx @somaui/cli add field-error-text
yarn dlx @somaui/cli add field-helper-text

//Feedback & Overlay Components
yarn dlx @somaui/cli add alert
yarn dlx @somaui/cli add modal
yarn dlx @somaui/cli add drawer
yarn dlx @somaui/cli add tooltip
yarn dlx @somaui/cli add popover
yarn dlx @somaui/cli add progressbar
yarn dlx @somaui/cli add radial-progressbar
yarn dlx @somaui/cli add loader
yarn dlx @somaui/cli add announcement

//Layout Components
yarn dlx @somaui/cli add box
yarn dlx @somaui/cli add flex
yarn dlx @somaui/cli add grid
yarn dlx @somaui/cli add collapse
yarn dlx @somaui/cli add accordion
yarn dlx @somaui/cli add tabs
yarn dlx @somaui/cli add stepper
yarn dlx @somaui/cli add table

//Data Display Components
yarn dlx @somaui/cli add avatar
yarn dlx @somaui/cli add badge
yarn dlx @somaui/cli add empty
yarn dlx @somaui/cli add dropdown
yarn dlx @somaui/cli add upload
yarn dlx @somaui/cli add action-icon

//Advanced Components
yarn dlx @somaui/cli add advanced-checkbox
yarn dlx @somaui/cli add advanced-radio
yarn dlx @somaui/cli add highlight
yarn dlx @somaui/cli add file-input
yarn dlx @somaui/cli add upload-zone

//Typography Components
yarn dlx @somaui/cli add typography
yarn dlx @somaui/cli add title
yarn dlx @somaui/cli add text
yarn dlx @somaui/cli add code
yarn dlx @somaui/cli add blockquote
yarn dlx @somaui/cli add italic
yarn dlx @somaui/cli add bold

//Utility Components
yarn dlx @somaui/cli add cn
yarn dlx @somaui/cli add use-collapse

pnpm

//Basic UI Components
pnpm dlx @somaui/cli add button
pnpm dlx @somaui/cli add input
pnpm dlx @somaui/cli add select
pnpm dlx @somaui/cli add checkbox
pnpm dlx @somaui/cli add radio
pnpm dlx @somaui/cli add textarea
pnpm dlx @somaui/cli add switch
pnpm dlx @somaui/cli add password
pnpm dlx @somaui/cli add pin-code
pnpm dlx @somaui/cli add multi-select

//Form Components
pnpm dlx @somaui/cli add checkbox-group
pnpm dlx @somaui/cli add radio-group
pnpm dlx @somaui/cli add field-clear-button
pnpm dlx @somaui/cli add field-error-text
pnpm dlx @somaui/cli add field-helper-text

//Feedback & Overlay Components
pnpm dlx @somaui/cli add alert
pnpm dlx @somaui/cli add modal
pnpm dlx @somaui/cli add drawer
pnpm dlx @somaui/cli add tooltip
pnpm dlx @somaui/cli add popover
pnpm dlx @somaui/cli add progressbar
pnpm dlx @somaui/cli add radial-progressbar
pnpm dlx @somaui/cli add loader
pnpm dlx @somaui/cli add announcement

//Layout Components
pnpm dlx @somaui/cli add box
pnpm dlx @somaui/cli add flex
pnpm dlx @somaui/cli add grid
pnpm dlx @somaui/cli add collapse
pnpm dlx @somaui/cli add accordion
pnpm dlx @somaui/cli add tabs
pnpm dlx @somaui/cli add stepper
pnpm dlx @somaui/cli add table

//Data Display Components
pnpm dlx @somaui/cli add avatar
pnpm dlx @somaui/cli add badge
pnpm dlx @somaui/cli add empty
pnpm dlx @somaui/cli add dropdown
pnpm dlx @somaui/cli add upload
pnpm dlx @somaui/cli add action-icon

//Advanced Components
pnpm dlx @somaui/cli add advanced-checkbox
pnpm dlx @somaui/cli add advanced-radio
pnpm dlx @somaui/cli add highlight
pnpm dlx @somaui/cli add file-input
pnpm dlx @somaui/cli add upload-zone

//Typography Components
pnpm dlx @somaui/cli add typography
pnpm dlx @somaui/cli add title
pnpm dlx @somaui/cli add text
pnpm dlx @somaui/cli add code
pnpm dlx @somaui/cli add blockquote
pnpm dlx @somaui/cli add italic
pnpm dlx @somaui/cli add bold

//Utility Components
pnpm dlx @somaui/cli add cn
pnpm dlx @somaui/cli add use-collapse

bun

//Basic UI Components
bunx @somaui/cli add button
bunx @somaui/cli add input
bunx @somaui/cli add select
bunx @somaui/cli add checkbox
bunx @somaui/cli add radio
bunx @somaui/cli add textarea
bunx @somaui/cli add switch
bunx @somaui/cli add password
bunx @somaui/cli add pin-code
bunx @somaui/cli add multi-select

//Form Components
bunx @somaui/cli add checkbox-group
bunx @somaui/cli add radio-group
bunx @somaui/cli add field-clear-button
bunx @somaui/cli add field-error-text
bunx @somaui/cli add field-helper-text

//Feedback & Overlay Components
bunx @somaui/cli add alert
bunx @somaui/cli add modal
bunx @somaui/cli add drawer
bunx @somaui/cli add tooltip
bunx @somaui/cli add popover
bunx @somaui/cli add progressbar
bunx @somaui/cli add radial-progressbar
bunx @somaui/cli add loader
bunx @somaui/cli add announcement

//Layout Components
bunx @somaui/cli add box
bunx @somaui/cli add flex
bunx @somaui/cli add grid
bunx @somaui/cli add collapse
bunx @somaui/cli add accordion
bunx @somaui/cli add tabs
bunx @somaui/cli add stepper
bunx @somaui/cli add table

//Data Display Components
bunx @somaui/cli add avatar
bunx @somaui/cli add badge
bunx @somaui/cli add empty
bunx @somaui/cli add dropdown
bunx @somaui/cli add upload
bunx @somaui/cli add action-icon

//Advanced Components
bunx @somaui/cli add advanced-checkbox
bunx @somaui/cli add advanced-radio
bunx @somaui/cli add highlight
bunx @somaui/cli add file-input
bunx @somaui/cli add upload-zone

//Typography Components
bunx @somaui/cli add typography
bunx @somaui/cli add title
bunx @somaui/cli add text
bunx @somaui/cli add code
bunx @somaui/cli add blockquote
bunx @somaui/cli add italic
bunx @somaui/cli add bold

//Utility Components
bunx @somaui/cli add cn
bunx @somaui/cli add use-collapse

Install SomaUI & Core Dependencies

npm

npm i @headlessui/react @floating-ui/react tailwind-variants tailwind-merge

yarn

yarn add  @headlessui/react @floating-ui/react tailwind-variants tailwind-merge

pnpm

pnpm add  @headlessui/react @floating-ui/react tailwind-variants tailwind-merge

bun

bun add  @headlessui/react @floating-ui/react tailwind-variants tailwind-merge

Package Overview - @headlessui/react - Provides accessible, unstyled primitives for complex components (dropdowns, modals, tabs) - @floating-ui/react - Advanced positioning system for tooltips, popovers, and dropdowns - tailwind-variants - Type-safe variant management system for component styling - tailwind-merge - A utility for merging Tailwind CSS classes

Install Tailwind CSS & Forms Plugin

Install these development dependencies for styling:

npm

npm i -D tailwindcss @tailwindcss/forms @tailwindcss/postcss

yarn

yarn add -D tailwindcss @tailwindcss/forms @tailwindcss/postcss

pnpm

pnpm add -D tailwindcss @tailwindcss/forms @tailwindcss/postcss

bun

bun add -D tailwindcss @tailwindcss/forms @tailwindcss/postcss

Development Dependencies - tailwindcss - The core Tailwind CSS v4 framework - @tailwindcss/forms - Enhanced form styling with consistent, accessible input designs - @tailwindcss/postcss - Tailwind CSS v4 PostCSS processing engine

Voila!!