- Advanced
- Components
- Accordion
- Autocomplete
- Avatar
- Avatar Group
- Breadcrumb
- Button
- Card
- Checkbox
- Chip
- Dropdown
- Field
- Heading
- Icon box
- Input
- Input File
- Input Number
- Kbd
- Link
- List
- Message
- Pagination
- Paragraph
- Placeholder
- Placeload
- Popover
- Primitive Field
- Progress
- Progress Circle
- Prose
- Radio
- Select
- Slider
- Snack
- Switch Ball
- Switch Thin
- Tabs
- Tag
- Text
- Textarea
- Theme Toggle
- Toast
- Tooltip
- Utilities
- Snippets
Introduction
A superset of Tailwind CSS and Reka UI, Shuriken UI is a component library that provides a set of accessible and customizable components to build functional interfaces. It is designed to be easy to use and integrate with Nuxt.
What is Shuriken UI?
Shuriken UI is a component library that provides a set of accessible and customizable components to build functional interfaces. It is designed to be easy to use and integrate with Nuxt.
It is built on top of Tailwind CSS, a utility-first CSS framework that provides a set of utility classes to style your components, and Reka UI, an open-source library with unstyled, primitive components.
What you can build
Shuriken UI is designed to be flexible and customizable, so you can use it to build a wide range of interfaces. While you can build great looking websites using it, Shuriken UI is particularly well-suited for building web applications, dashboards, and other complex interfaces.
Accessibility
Shuriken UI has rock-solid accessibility built-in, as it is now built on top of Reka UI, which is designed to be accessible by default. This means that you can build accessible interfaces without having to worry about it.
Reka UI is an open-source UI component library for building high-quality, accessible design systems and web apps using Vue.js. Reka UI strives to deliver a low-level UI component library centered on accessibility, customization, and developer experience. We use these components as the foundation of the Shuriken UI component system.
Customization
Shuriken UI is designed to be easy to customize, so you can easily change the look and feel of your components to match your brand or design system. You can customize the colors, typography, spacing, and more using Tailwind CSS.
Shuriken UI already supports Tailwind CSS v4. This is a huge paradigm shift in the way we think about utility-first CSS frameworks. It is a complete rewrite of the framework, with a focus on performance, developer experience, and customization. Less JS and more CSS, you can now customize almost everything in your design system using CSS variables.
Icones.js
Icones.js is a free icon pack that includes 30,000+ icons for your projects. It is integrated with shuriken UI. You can use it to find the icons you need for your projects.
Explore the Icones.js website to find the icons you need for your projects.