NewReact + Tailwind Storybook is live

Design in Figma.
Ship in React.

Figma components and matching React code on the same design tokens, for designers and developers.

View components View Storybook
  • Design tokens
  • Reusable components
  • Multi-theme and RTL
Watch how Pixels helps

Try it live

Pick a component, pattern, template or page. Change its properties. The code follows.

pixels / components / Button Live

Loading live components…

Why Pixels

Stop rebuilding. Start scaling.

Disconnected design files, inconsistent components, and duplicated development work slow product teams. Pixels gives your team a shared foundation from design to code.

One token system

Keeps design decisions consistent across themes and products.

Reusable components

Start from a structured foundation instead of rebuilding common UI.

Design to code workflow

Connect design tokens to a documented coded component library.

Component guidelines

How individual components should look, behave, and be used.

Seamless integration

From design to development, all connected

Design in Figma, manage tokens, sync through GitHub, and deliver production-ready components with Storybook.

React + npm

Install in one line

The free package is public on npm. Pro arrives as a licence key by email: add it to .npmrc and install every Pro chart, pattern and template.

  • Works with npm, pnpm, yarn and bun
  • Next.js, Vite and TypeScript ready
  • One key per developer, switched off on refund
Read the install guide 
# the free components
npm install @pixelsds/react

/* your CSS */
@import '@pixelsds/react/styles.css';
Built to scale with you

One design system for every stage of growth

From your first product to a multi-team ecosystem, Pixels gives your team a shared foundation to design, build, and scale with confidence.

  1. Idea
  2. First launch
  3. Product-market fit
  4. Many products
  5. Many teams and brands

For startups

Ship your first product fast.

Launch on a ready-made foundation. Focus on your product, not on UI infrastructure.

  • Production-ready components

    Battle-tested building blocks, in Figma and code.

  • Validate ideas faster

    Design and ship new features in days, not weeks.

  • Design and code stay in sync

    One set of tokens keeps every screen consistent.

Explore the starter system

For enterprise

Keep every team consistent.

Standardize components, themes and design decisions across teams, for the long term.

  • One brand, every product

    A shared UI language your customers recognize.

  • Less duplicate work

    Designers, developers and stakeholders build on the same parts.

  • Themes, platforms and growth

    Add brands, dark mode and RTL without a rebuild.

Explore the enterprise solution
Arabic & RTL

Built for Arabic.
Ready for right-to-left.

Serve clients across the UAE and the Middle East with one design system that mirrors perfectly: Arabic typography, right-to-left layouts and icons that know which way to point, all from the same tokens.

  • Layouts mirror automatically with logical properties
  • Arabic type scale with IBM Plex Sans Arabic
  • Every component translated and tested in RTL
Explore the Arabic system
NewPixels Motion

Motion that moves like your brand.

Ready-made animation packs for e-commerce, healthcare, finance and more. Every pack comes as video and clean CSS code, so your developers change one color and ship.

  • Video plus editable HTML and CSS in every pack
  • Colors run on CSS variables, so it matches your brand
  • Buy a pack, or the full licence to own it alone
Explore Motion See licences
FAQ

Questions, answered

Short answers about Pixels, design tokens and how to start.

Design token
A named value for color, type, spacing, radius or shadow.
Component
A reusable piece of UI, like a button or a date picker.
Variant
One version of a component, such as a small or disabled button.
RTL
Right-to-left layout, used for Arabic and Hebrew.

What is Pixels?

Pixels is a token-based design system for product teams. It includes 85 Figma components with 2,500 variants, 1,163 design tokens and 1,637 icons. Matching React components on npm and a live Storybook keep design and code the same.

Who is Pixels for?

Pixels is for startups that want to launch fast and for enterprise teams that need one consistent UI. Designers use the Figma library. Developers use the tokens and components.

What are design tokens?

Design tokens are named values for color, type, spacing, radius and shadow. You change a token once, and every component that uses it updates. Pixels exports its tokens from Figma with Tokens Studio.

Does Pixels support Arabic and right-to-left?

Yes. Every component works in right-to-left layouts, and Pixels switches to an Arabic typeface in RTL mode. Icons and spacing flip where they should.

Does Pixels support dark mode and more than one brand?

Yes. Pixels has light and dark themes, and its tokens are grouped into 7 collections with 13 modes. You can add a new brand by changing the brand tokens, without rebuilding components.

How much does Pixels cost?

Pixels Pro Figma costs $79 as a one-time payment (₹6,599 in India, plus GST). AI Brand Customization starts at $299. Motion packs cost $19 each. See the pricing page for every plan.

How do I start using Pixels in code?

Install the free React package from npm, then add one line to your stylesheet:

  1. Run npm install @pixelsds/react.
  2. Import @pixelsds/react/styles.css, or add @source for Tailwind CSS v4.
  3. Import components, for example import { Button } from '@pixelsds/react'.
  4. Pro buyers add their licence key to .npmrc and install @pixelsds-pro/react. See the installation guide.