https://skeleton-docs-8cx0tdkbs-skeleton-labs.vercel.app/elements/core
Body Background
Your app's background is automatically set via a design token class. Adjust your theme's color
scheme to customize. This affects both light and dark mode.
body { @apply bg-surface-50-900-token; }
Selection
Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how
selection color changes depending on the background.
The quick brown fox jumps over the lazy dog.
Mobile Focus
Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.
Scrollbars
Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable
scrollbars.
Test Scrolling Here
Iusto in ipsa. Quisquam possimus minus. Corporis rem amet aperiam totam accusantium omnis accusamus ipsam. Quia officia eligendi omnis iste atque libero provident. Dolore accusantium esse provident quam ea laboriosam. Voluptas provident velit doloremque. Culpa sed distinctio ad odit. Quae ipsa at amet corrupti earum eum modi. Deserunt itaque ab. Incidunt nulla facere ratione voluptatem hic commodi eius nisi. A ex error eum placeat magni molestias esse modi odit. Eum necessitatibus nam voluptate recusandae sequi omnis perspiciatis. Id ut repellat consectetur vel ea molestias ipsam occaecati natus. Facere ad facilis asperiores adipisci fuga. Nam expedita laborum. Itaque cumque dolorem. Quam quis doloremque eligendi voluptas et. Quidem molestias tenetur pariatur. Vitae tempora optio quo. Architecto corrupti error impedit. Iusto vel possimus aliquid facilis rerum fugit asperiores veritatis. Aliquam veniam nemo numquam iusto eligendi quibusdam alias porro. Adipisci placeat sapiente sunt cupiditate nostrum dignissimos. Dolorem consequuntur veritatis consequatur cumque sequi placeat doloribus harum ipsum. Ex labore autem ducimus placeat quibusdam ex iste. Amet minus iusto dolor consequatur quae. Voluptate neque consequatur quae excepturi eos. Voluptates deleniti expedita autem voluptatem. Mollitia blanditiis expedita ex assumenda quae quas. Ad quo animi nemo. Delectus provident blanditiis totam in. Nihil reiciendis rem voluptatum adipisci culpa fugiat. Ducimus maiores occaecati vitae cum consequatur pariatur eligendi. At placeat incidunt dignissimos doloribus quibusdam atque. Commodi amet nemo quidem. Quos eligendi minima fugiat impedit praesentium. Modi nulla magni ex debitis natus et quas eveniet aliquam. Soluta commodi cupiditate totam voluptatum consequuntur earum vitae. Ex quia corrupti est iure aliquam animi soluta temporibus. Occaecati accusamus nostrum quidem explicabo voluptatem. Quibusdam veritatis dolor velit asperiores aliquid porro asperiores dolor. Magnam magnam dicta minima minima cum aspernatur. Facilis inventore totam nesciunt error ea. Quo exercitationem corporis debitis temporibus delectus sunt. Ad praesentium a voluptas. Consequuntur tenetur delectus quos dolorem perspiciatis sequi similique. Minus placeat tempore ut tempora quisquam deserunt quo. Commodi magnam aperiam possimus assumenda. Excepturi nobis suscipit iure nam numquam. Distinctio ipsam et neque.
Dividers
Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the
width.
Divider Styling
Dividers may be dashed, dotted, or doubled.
Vertical Dividers
Divide columns with the .divider-vertical class. You can apply it with a span
tag. Adjust the
height as desired.