Glizzy UI
A shadcn/ui-inspired UI library for Gleam and Lustre
What is Glizzy UI?
Glizzy UI is a comprehensive UI component library built for Gleam and Lustre. Inspired by shadcn/ui, it provides beautifully designed, accessible, and customizable components for building modern web applications.
Features
- 60+ Components - Buttons, inputs, dialogs, navigation, layout, and more
- Accessible - WAI-ARIA compliant with keyboard navigation
- Customizable - Easy to theme and style
- Type-Safe - Full Gleam type safety
- Zero Dependencies - Built on Lustre 5.x
Quick Start
Installation
gleam add glizzy
Usage
import glizzy/ui/button
import lustre.{type Msg, element}
import lustre/element.{button, text}
fn view(msg: Msg) -> element(Msg) {
button.button(
~{
variant: button.Primary,
size: button.Default,
disabled: False,
onclick: Some(Clicked),
},
[text("Click me!")],
)
}
Components
| Category | Components |
|---|---|
| Core | Button, Checkbox, Input, Radio, Select, Slider, Switch |
| Forms | Calendar, Date Field, Date Picker, Number Field, Search Field, Text Field, Time Field |
| Layout | Box, Cluster, Stack, Sequence, Centre, Aside, Divider, Separator |
| Navigation | Breadcrumbs, Link, Menu, Tabs, Toolbar |
| Overlay | Dialog, Modal, Popover, Tooltip, Disclosure |
| Data Display | Avatar, Badge, Chip, KBD, Table, Tree |
| Feedback | Alert, Meter, Progress Bar, Skeleton, Spinner, Toast |
| Selection | Autocomplete, Checkbox Group, Combobox, Grid List, List Box, Radio Group, Tag Group, Toggle Button |
| Color | Color Area, Color Field, Color Picker, Color Slider, Color Swatch, Color Wheel |
| Advanced | Drop Zone, File Trigger, Virtualizer, Split Panel |
Documentation
Examples
Check out the example application for a complete demo of all components.
cd examples/lustre_app
gleam run
Development
Build
gleam build
Test
gleam test
Format
gleam format
E2E Tests
bun install
bunx playwright test
License
MIT License - see LICENSE for details.