skills.rest
gurujadagurujadaOfficial·1 Agent Skills Included

sutra_ui

Phoenix LiveView components with CSS-first theming and dark mode

Builds Phoenix LiveView interfaces with 55 ready-made components including forms, dialogs, calendars, tables, and file uploads. Removes the need for React, npm packages, and external JavaScript by using pure LiveView with colocated hooks. Applies custom themes through simple CSS variables and includes dark mode, accessibility patterns, and copy-paste recipes.
46|1
↗
npx skills add gurujada/sutra_ui --all -g -y

All Skills in This Repository (1)

Pure Emerald Level Indicators
📦 In Repo
gurujadagurujada

sutra-ui

Provide Phoenix LiveView UI components and CSS-first theming utilities.

Official
Advanced

Frequently Asked Questions

FAQPage Schema
How to install Sutra UI?▼

Run `npx skills add gurujada/sutra_ui --all -g -y` in your terminal to install this skill globally. Then add the sutra_ui package to your mix.exs dependencies and run `mix sutra_ui.install` in your Phoenix project.

What is Sutra UI used for?▼

It is a Phoenix LiveView component library inspired by shadcn/ui, offering 55 components like buttons, forms, dialogs, and calendars. It helps you build accessible, themeable web interfaces without any external JavaScript frameworks.

Does Sutra UI need React or npm packages?▼

No. Sutra UI is pure Phoenix LiveView and uses colocated hooks, so there is no React, no npm dependencies, and no node_modules bloat.

How do I customize Sutra UI themes?▼

Override CSS variables like --primary and --radius in your app.css after importing sutra_ui.css. You can even paste theme variables directly from shadcn/ui themes, and dark mode is built in.

Which Phoenix versions does Sutra UI support?▼

It requires Elixir 1.20+, Phoenix 1.8+, Phoenix LiveView 1.2+, and Tailwind CSS v4. Phoenix 1.8 is needed because the library relies on colocated hooks.

Related Repositories in Software Engineering

View All in Software Engineering→
openclawopenclaw
388.4k

openclaw

Run a personal AI assistant across your devices and chat apps

Official📦 120 Skills
obraobra
280.0k

superpowers

Gives coding agents a disciplined workflow from idea to merged code

Community📦 15 Skills
facebookfacebook
248.4k

react

AI agent skills for building, testing, and porting React core

Official📦 14 Skills