Guides
Practical guides for building React + Tailwind interfaces with shadcn: charts and forms you can install today, the Figma-to-code workflow behind mebius.design’s kits, and honest comparisons of the free libraries we get asked about.
All guides
Each one answers a question in its first paragraph, then shows the code.
Animated candlestick chart in React for a shadcn dashboardshadcn/ui ships no candlestick chart. Add an animated OHLC candlestick card to a React + Tailwind dashboard with the shadcn CLI and feed it your own candles.Multi-step form in React and shadcn with validation per stepBuild a React multi-step form that validates each step on Continue, keeps answers on Back and submits once, then install two free shadcn multi-step forms.From Figma to React with a shadcn registryTurn a Figma design system into installable React code: variables to Tailwind v4 tokens, components to registry items, checks against Figma, then the CLI.Install UI components with the shadcn CLI and an MCP serverAdd a private shadcn registry to components.json, install its theme and components with the CLI, and let Claude Code, Cursor or VS Code add them over MCP.Free React chart libraries and collections, compared honestlyRecharts, shadcn charts, ECharts, Nivo, visx, Chart.js, Lightweight Charts and copy-in collections: what each free React chart option does well, and its limits.Free React form templates and blocks, compared honestlyForm libraries, field components and finished form blocks for React and shadcn: what each free option gives you, its licence, and how to combine them.POS dashboard in React: the screens, the numbers and a starting kitWhat a point of sale dashboard needs, which numbers its overview shows and how to compute them, and how to start from Relivo's Figma + React + Tailwind kit.Crypto dashboard UI in React: portfolio, markets and trading cardsWhat a crypto dashboard shows, from portfolio value to candles and a trade widget, with free React chart cards and Bitgo's Figma + React + Tailwind kit.