70+ componentssuite of dev tools

build better, faster.

copy. paste. ship. no npm drama, no version headache.
just clean code that becomes yours the moment you use it.

browse playground

built for react native · ios · android · web

button.tsx
// yours now. no strings attached.
import { Button } from '@/components/ui/button'

export default function Dashboard() {
  return (
    <div className="flex gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

showcase

built as the sweet spot in development.

Tools that land exactly where you need them. Fast to grab. Easy to own. Powerful enough for real work.

01

datatable

sorting · filtering · selection · pagination
nameemailstatusrolerevenue
olivia martinolivia@acme.comActiveadmin$24,500
jackson leejackson@acme.comActivemember$18,200
isabella nguyenisabella@acme.comPendingmember$12,800
william kimwilliam@acme.comInactiveviewer$8,400
1 of 4 row(s) selected
02

command

fuzzy search · keyboard nav · sections · shortcuts
03

chart

tooltips · legends · responsive · animations

revenue over time

monthly revenue for 2024

revenue
expenses
JanFebMarAprMayJunJulAugSepOctNovDec

tools

ship faster with dev tools

beyond components - productivity tools that fit into your workflow.

studio

Define colors, fonts, spacing, radius, gaps in one place. See it live. Download everything. Plug it in whenever.

open tool →
lint

Automated design and accessibility linter. Paste code, get instant feedback on issues and best practices.

open tool →
icon

Search, preview and copy icons. Multiple styles, clean exports. Built for speed.

coming soon
theme

Live theme generator. Pick a base, tweak, export. Dark mode, light mode, any mode you want.

coming soon
AI-Powered Design Systems

Describe your vibe.
Get production code.

The fastest way to create a cohesive design system. Type a vibe or upload a reference - get tokens, components, and exports in seconds. No Figma. No CSS paralysis. Just ship.

From vibe to production in 3 steps

No design skills required. No endless configuration. Just describe what you want and let AI do the work.

1

Describe or Upload

Type a vibe like "dark mode, teal accents, minimal like Linear" or upload a screenshot of any UI you admire.

"glassmorphic, blue-green accents, modern"
2

AI Generates Your System

In seconds, get a complete token system: colors, typography, spacing, shadows, component variants - all accessibility-checked.

ColorsTypographySpacingShadowsVariants
3

Export & Ship

Download CSS variables, Tailwind config, React Native styles, or Figma variables. Drop into your project and go.

CSSTailwindReact NativeFigma

Everything you need to ship

A complete toolkit for creating and managing design systems.

AI-Powered Generation

Describe your vibe in plain English or upload a reference image. Our AI creates a complete, cohesive token system.

11 Export Formats

CSS variables, Tailwind, React Native, Figma Variables, Tokens Studio, component variants - export to any platform.

Built-in Validation

WCAG contrast checking, touch target validation, and typography best practices - ship accessible by default.

Component Variants

Auto-generated button, input, card, badge, and alert variants. Real components, not just colors.

Shareable Links

Share your design system with a single URL. Perfect for team collaboration or client reviews.

No Lock-in

Everything you create is yours. Export and own your tokens forever. No subscriptions, no dependencies.

Pull tokens into any project

Use our CLI to integrate design tokens directly into your build process.

terminal
$npx hyena-studio init

hyena studio - token initializer

? paste your share URL:

> https://hyena.studio/studio?t=...

? choose output format:

> CSS Variables

? output directory:

> ./src/tokens

ok files created:

./src/tokens/tokens.css

tokens initialized!

Works with any framework. No dependencies required.

Next.jsReactVueSvelteReact Native

Ready to ship faster?

Stop fighting with colors and spacing. Create a professional design system in minutes, not days.

Open Hyena Studio- it's free

No sign up required. No credit card. Just start building.