Skip to content
Storybook

Patterns Pro

Ready-made sections built from the components: sign in, pricing, settings, notifications and more. Live in the Storybook, React + Tailwind, with the matching Figma frames.

Sign inA split sign-in screen: a brand panel with a quote on one side, the auth card on the other.Stats overviewA dashboard header with a period switch and export, a KPI row and a revenue chart.Filters barSearch, filter selects, active filter chips and a clear action above a list.Profile settingsProfile settings with tabs, avatar upload, two-column form rows and preference switches.Empty stateAn empty list that explains why it is empty and offers next steps.Loading statesSkeleton cards, a busy button and the orbiting loader for work in progress.Notification centerA tabbed inbox with unread dots, avatars and inline accept and decline actions.Pricing plansThree plan cards with a highlighted tier, features and a call to action.Customers tableA table page: title, export action and the data table with search, sort and pagination.