64 Components
Pre-built UI components. Use standalone or with React/Vue/Angular.
Buttons
All variants, sizes, and states
Form Controls
Inputs, selects, toggles, and sliders
Select / Dropdown
Searchable, multi-select, and custom dropdowns
Progress & Loading
Linear progress bars and spinners
Alerts
Contextual feedback messages
Badges
Notification indicators and count displays
Chips
Tags, filters, and selections
Avatars
User profile images with fallback initials
Cards
Content containers with header/footer slots
Elevated Card
Cards with shadow appear to float above the surface.
Outlined Card
Outlined cards have a subtle border.
Skeleton
Loading placeholders
Divider
Content separators in horizontal and vertical orientations
Breadcrumbs
Navigation path indicators
Modal
Dialog overlays for focused interactions
Confirm Action
Are you sure you want to proceed? This action cannot be undone.
Edit Profile
Tooltip
Contextual information on hover or click
Pagination
Navigation for paged content
Link
Styled anchor elements
Empty State
Placeholder for empty content areas
Timer
Countdown and stopwatch timers
Color Picker
Interactive color selection
Date Picker
Date selection with calendar
QR Code
Generate QR codes with colors, logos, and styles
Accordion
Expandable content sections
A TypeScript web component library with decorators, differential rendering, and separation of concerns.
Run npm install snice to get started. Components are tree-shakeable.
Yes! All components follow WCAG guidelines with keyboard navigation and ARIA attributes.
Tabs
Tabbed content navigation
Snice provides 64 production-ready UI components built with TypeScript and modern web standards.
Decorators, differential rendering, routing, controllers, form association, and more.
Use standalone builds, or import from the full package. Works with React, Vue, and Angular.
Banner
Full-width notification banners
Drawer
Slide-out panels from any edge
Navigation
Details Panel
Additional information and actions can go here.
Quick Actions
Menu
Dropdown menus with keyboard navigation
Toast
Temporary notification messages
Command Palette
Keyboard-driven command search (Ctrl/Cmd+K)
Stepper
Multi-step process indicator
Chart
Line, bar, pie, and area charts
Sparkline
Inline mini charts
Timeline
Chronological event display
Image
Lazy-loaded images with variants
Carousel
Image and content slider
File Upload
Drag-and-drop file selection
File Gallery
File management with previews and upload progress
Code Block
Syntax-highlighted code display
Terminal
Interactive command-line interface
Chat
Real-time messaging interface
Split Pane
Resizable split layouts
Drag the divider to resize
Content adjusts automatically
Calendar
Date picker calendar with events
Draw
Freehand drawing canvas
Color Display
Color swatch with label
Kanban
Drag-and-drop kanban board
Location
Address and coordinate display
Camera
Webcam capture (requires permission)
Camera Capture
QR Reader
QR code scanner (requires camera permission)
Scan QR Code
Audio Recorder
Voice recording (requests mic permission on record)
Music Player
Audio playback with playlist
Standalone Build
Use any component without the full framework
npx snice build-component button
# creates snice-button.min.js (~25kb gzipped)
<script src="snice-button.min.js"></script>
<snice-button variant="primary">Works anywhere</snice-button>React Adapter
First-class React 17+ support
import { Button, Input, Alert } from 'snice/react';
function LoginForm() {
const [email, setEmail] = useState('');
return (
<>
<Input
label="Email"
value={email}
onChange={(e) => setEmail(e.detail.value)}
/>
<Button variant="primary" onClick={handleSubmit}>
Sign In
</Button>
</>
);
}