SpiroKit Design System

SpiroKit is a collection of carefully crafted components and design principles to quickly transform an idea into a prototype.

🌐 Website

😺 Product Hunt

🎨 Design system PREVIEW

SpiroKit for Figma

Includes

• Hundreds of building blocks
• Color palette
• Typography scales
• Spacing rules
• Dozens of pre-built screens
• Dark mode support
• Icons

Features

• Variants: SpiroKit uses Figma variants globally, which allows you to easily try out different variations of each component.
• Atomic Design: Each component was built applying the atomic design philosophy, meaning that you'll get hundreds of building blocks to mix and match to create unique screens in minutes.
• Dark mode: Components include a dark-mode variant. You can easily switch back and forth between light & dark.
• Shared styles: SpiroKit shares Text & Color styles across the entire kit so you can apply a color or typography change over hundreds of components from a single place.
• Responsive to the core: Each component uses Figma Auto-Layout so you can resize and adapt your prototypes to any device.

⭐️ Licencing: Commercial License for unlimited editors.

SpiroKit for React Native

• Production-ready components for your React Native apps
• Theme provider with Dark mode support
• Accessible components
• Built using TypeScript
• Expo compatible
• Interactive documentation using Storybook

⭐️ Licencing: Commercial License for unlimited projects. 

(*) Will be available in the upcoming months

Pay once, use it everywhere you want.